View Full Version : Providing "add/remove" functionality for table rows

05-21-2009, 06:22 PM
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:

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";

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

var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";

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) {
}catch(e) {

Here is the HTML:

<table border="0" cellspacing="0" cellpadding="0" width="100%" id="dataTable">
<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>
<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>
<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>
<td valign="top"><input type="file" id="descriptorFile" /></td>
<td valign="top"><input type="file" id="binaryFile" /></td>

<br />

<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

Any help is appreciated.