binding row of a table created dynamically [Archive]

sherihan

Jan 31st, 2005, 07:35 AM

Hi,
I have a form that contains a button and a table.
Whenever I click this button a new row is added to the table.
How could I make the binding of the table rows?
Here is how the jsp page looks like:
I want to bind the rows of the table name itemTable.
<%@ include file="/taglibs.jsp"%>
<SCRIPT LANGUAGE="JavaScript">
i=0;

function addRow(id){
var itemcode = document.createElement("INPUT") ;
itemcode.type = "text" ;
itemcode.name = "itemLine["+ i +"].item.code" ;
itemcode.value = "itemLine["+ i +"].item.code" ;

var quantity = document.createElement("INPUT") ;
quantity.type = "text" ;
quantity.name = "itemLine["+ i +"].quantity" ;
quantity.value = "itemLine["+ i +"].quantity" ;

var itemid = document.createElement("INPUT") ;
itemid.type = "hidden" ;
itemid.name = "itemLine["+ i +"].item.id" ;
itemid.value = "itemLine["+ i +"].quantity" ;

var delbutton = document.createElement("INPUT") ;
delbutton.type = "button" ;
delbutton.name = "itemLine_"+ i +"_delete" ;
delbutton.id = "itemLine_"+ i +"_delete" ;
delbutton.value = "Delete";

var tbody = document.getElementById(id).getElementsByTagName("TBODY" )[0];
var row = document.createElement("TR" );
row.id = "itemLine_"+i;

var td1 = document.createElement("TD" );
td1.appendChild(itemcode);
var td2 = document.createElement("TD" );
td2.appendChild (quantity);
var td3 = document.createElement("TD" );
td3.appendChild (delbutton);

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(itemid);
tbody.appendChild(row);

document.getElementById("itemLine_"+ i +"_delete").addEventListener("click",deleteItemLine,false);

i++;
}

function deleteItemLine(evt) {
btn = (evt.target)?evt.target:(evt.srcElement)?evt.srcEl ement:false;
row = btn.parentNode.parentNode;
document.getElementById('itemTable').deleteRow(row .rowIndex);

}

</SCRIPT>
<html>
<title>Add Invoice</title>
<table id="itemTable" cellspacing="0" border="1">
<tbody>
<tr>
<td>ItemCode</td>
<td>Quantity</td>
<td></td>
</tr>
</tbody>
</table>

<p><input type="button" name="addItem" value="Add Item" onclick="javascript:addRow('itemTable');"/><input type="submit" name="submit" value="Submit"/>
</form>
</html>

How could this be done?
Thanks in Advance.