Providing add/remove table row functionality to a form

I am trying to add functionality to a table that allows users to add and remove table rows, but I am stuck on the JS part of it. The JS I am working with allows users to add/remove table rows that are populated with text input fields, but I want it so where the rows are populated with these elements: 1) multiple select with populated options, 2) file upload box (input type=”file”). I have no idea how to modify the JS below to do this (I am new to JS).

Here is the JS I am working with:

[code]

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
var element1 = document.createElement(“input”);
element1.type = “checkbox”;
cell1.appendChild(element1);

var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;

var cell3 = row.insertCell(2);
var element2 = document.createElement(“input”);
element2.type = “text”;
cell3.appendChild(element2);
}

function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount–;
i–;
}
}
}catch(e) {
alert(e);
}
}

[/code]

Here is the HTML:

[code]

<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%” id=”dataTable”>
<tr>
<td valign=”bottom”>&nbsp;</td>
<td valign=”bottom”><label for=”mobileManufacturer”>Manufacturer</label></td>
<td valign=”bottom”><label for=”mobileModel”>Model</label></td>
<td valign=”bottom”><label for=”descriptorFile”>Build Descriptor File (JAD)</label></td>
<td valign=”bottom”><label for=”binaryFile”>Build Binary (JAR, CAD, ZIP)</label></td>
</tr>
<tr>
<td valign=”top”><input type=”checkbox” /></td>
<td valign=”top”>
<select multiple=”multiple” size=”4″ id=”mobileManufacturer”>
<option>Manufacturer 1</option>
<option>Manufacturer 2</option>
<option>Manufacturer 3</option>
<option>Manufacturer 4</option>
<option>Manufacturer 5</option>
<option>Manufacturer 6</option>
</select>
</td>
<td valign=”top”>
<select multiple=”multiple” size=”4″ id=”mobileModel”>
<option>Model 1</option>
<option>Model 2</option>
<option>Model 3</option>
<option>Model 4</option>
<option>Model 5</option>
<option>Model 6</option>
</select>
</td>
<td valign=”top”><input type=”file” id=”descriptorFile” /></td>
<td valign=”top”><input type=”file” id=”binaryFile” /></td>
</tr>
</table>

<br />

<input type=”button” value=”Add Row” onclick=”addRow(‘dataTable’)” />
<input type=”button” value=”Delete Row” onclick=”deleteRow(‘dataTable’)” />

[/code]

Any help is appreciated.

Also in #JavaScript _↴