2
\$\begingroup\$

I'm trying to dynamically create a table of input fields (two per field) that I will then send off to a Python script.

Here's the expected behaviour:

  • User chooses "manual entry," specifies rows, columns, of table, clicks button.
  • Table is printed with two input fields per cell (e.g.: A(i,j), B(i,j)), user fills in all fields, hits button.
  • Data is sent off to Python (first-best would be two 2D arrays, one for in inputs in A, the other for B).

Questions:

  • Is there a simpler/smarter way to set up the table to get an array of input to pass to Python? I'm not sure how I will eventually pass the data to Python.
  • Is there a simpler/smarter way to set up the dynamic part? The way I'm doing it is far from perfect (for example, if the user changes his/her mind about manual entry and switches back to 'automatically fill table', the manual entry table stays there).

function tableCreate(men, women) {
  var body = document.body,
    tbl = document.createElement('table');
  tbl.style.width = '100px';
  // tbl.style.border = '1px solid black';

  for (var i = 0; i < women; i++) {
    var tr = tbl.insertRow();
    for (var j = 0; j < men; j++) {
      var td = tr.insertCell();
      // Following adds a text field:
      var input1 = document.createElement("input");
      input1.type = "text";
      input1.name = 'wPref-' + j + "-" + i;
      input1.size = '1';
      input1.maxLength = '2';

      var input2 = document.createElement("input");
      input2.type = "text";
      input2.name = 'mPref-' + j + "-" + i;
      input2.size = '1';
      input2.maxLength = '2';
      // input.className = "css-class-name"; // set the CSS class
      td.appendChild(input1); // put it into the DOM
      td.appendChild(input2); // put it into the DOM

      // td.appendChild(document.createTextNode('Cell'));
      td.style.border = '1px solid black';
    }
  }
  body.appendChild(tbl);
}


function getPlayers() {
  var x = document.getElementById("men");
  var men = x.options[x.selectedIndex].value;
  var y = document.getElementById("women");
  var women = y.options[y.selectedIndex].value;
  tableCreate(men, women);

}
<body>
  <form name="pyform" method=="POST" action="/cgi-bin/da_form.py" style='font-family:Arial,sans-serif;font-size:12px'>
    Number of men: &nbsp; &nbsp; &nbsp;
    <select name='men' id='men'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
    </select>

    <br>
    <br>Number of women:&nbsp;
    <select name='women' id='women'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
    </select>

    <br>
    <br>

    <input type="button" value="Draw table" onClick="getPlayers();">

  </form>
</body>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.