Hi
I'm currently developing a form with a dynamic table. initially the table is
populated with data and at the end of each row there are two buttons:
addLevel and addItem. Each button creates a new row below the row the button
is in. The new row also has these buttons, but when pressing one of these
buttons, nothing happens.
Can someone tell me why?
here's the code to the addLevel button:
<script>
doc = document;
cbsTotal =0;
cbsLevel =0;
function addLevelTo(id,index) {
var tbl = doc.getElementById(id);
var cbsHidden = doc.getElementById("cbsTotal");
var rowID = (showRowCell (index)) + 1;
cbsLevel++;
if(id == "cbsBody"){
var newrow = tbl.insertRow(rowID);
alert("check: " + id);
var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "red";
var newdata ="<div align='left'><input name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'></div>";
newcol.innerHTML = newdata;
var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "green";
var newdata = "<div align='left'><input name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'></div>";
newcol.innerHTML = newdata;
var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<div align='left'><input name='cbs" + cbsTotal + "
type='text' id='cbs" + cbsTotal + " size='20' maxlength='40'></div>";
newcol.innerHTML = newdata;
var newcol = newrow.insertCell();
newcol.height = 25;
newcol.bgcolor = "blue";
var newdata = "<input type='button' name='Add Level' value='Add Level'
onClick='addLevelTo('cbsBody',this);'> <input type='button' name='Add Item'
value='Add Item' onClick='addRowTo('cbsBody');'>";
newcol.innerHTML = newdata;
cbsTotal++;
cbsHidden.value = cbsTotal;
}else{
//do nothing
}
updateRowCounters(tbl);
}
</script>
<script>
//housekeeping functions
function updateRowCounters(form){
var sel1 =form.insertIndex
var sel2 =form.deleteIndex
sel1.options.length =0
sel2.options.length =0
for (var i =0;i <theTableBody.rows.length;i++){
sel1.options [i ] ==new Option(i,i)
sel2.options [i ] ==new Option(i,i)
}
form.removeRowBtn.disabled =(i==0)
}
</script>
<script>
function showRowCell (element) {
var cell, row;
if (element.parentNode) {
do
cell = element.parentNode;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentNode;
}
else if (element.parentElement) {
do
cell= element.parentElement;
while (cell.tagName.toLowerCase() != 'td')
row = cell.parentElement;
}
return row.rowIndex;
}
</script>
