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:
<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:
<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>
