I'm trying to dynamically build a table that allows users to remove
rows when they click a corresponding button. For some reason,
whenever I add the button to the table, it never fires the onclick
event. I'm stumped with this one, any assistance would be
appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252" />
<title>JS Table</title>
<script type="text/javascript">
<!--
var prodarray = new Array();
function plusrow() {
var mytable = document.getElementById("tabproduct");
var currentrow = mytable.insertRow();
var currentrowindex = mytable.rows.length - 1;
currentrow.id = "row" + currentrowindex;
prodarray[currentrowindex] =
document.myForm.selproduct.options[document.myForm.selproduct.selectedIndex].value;
var prodcell = currentrow.insertCell(0);
var textnode =
document.createTextNode(document.myForm.selproduct .options[document.myForm.selproduct.selectedIndex].value); //
Need to fix this to put in dropdown value
prodcell.appendChild(textnode);
var tempin1 = document.createElement("input");
tempin1.type = "text";
tempin1.id = currentrowindex + ":currentship";
tempin1.name = currentrowindex + ":currentship";
tempin1.width = "60";
var currentshipcell = currentrow.insertCell(1);
currentshipcell.appendChild(tempin1);
var tempin2 = document.createElement("input");
tempin2.type = "text";
tempin2.id = currentrowindex + ":nextship"
tempin2.name = currentrowindex + ":nextship"
tempin2.width = "60";
var nextshipcell = currentrow.insertCell(2);
nextshipcell.appendChild(tempin2);
var deletebutton = document.createElement("input"); //This button
never works in a table!
deletebutton.type = "button";
deletebutton.id = currentrowindex + ":minus";
deletebutton.name = currentrowindex + ":minus";
deletebutton.value = "-";
//deletebutton.onclick = "minusrow(" + currentrowindex + ");"; //
action I want to happen
deletebutton.onclick = "alert('event fired');"; //this doesn't even
work
var deletecell = currentrow.insertCell(3);
deletecell.appendChild(deletebutton);
//document.write(currentrow.outerHTML); //event works fine here,
comment this line to see problem.
}
function writehidden() {
var arraystring = prodarray.toString();
document.myForm.product_array.value = arraystring;
}
function minusrow(row) {
var mytable = document.getElementById("tabproduct");
mytable.deleteRow(row);
}
//-->
</script>
</head>
<body>
<form id="myForm" name="myForm" action="process.php" method="post"
onsubmit="writehidden();">
<input type="hidden" id="product_array" name="product_array" />
<select id="selproduct" name="selproduct" size="1">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Kiwi">Kiwi</option>
<option value="Pumpkin">Pumpkin</option>
<option value="Grapes">Grapes</option>
<option value="Strawberry">Strawberry</option>
<option value="Boisenberry">Boisenberry</option>
</select>
<input type="button" id="b_addrow" name="b_addrow" value="+"
onclick="plusrow();" />
<p />
<table id="tabproduct" name="tabproduct" border="1">
</table>
<p />
<input type="submit" id="submitbutton" value="Send to Server" />
<p />
<input type="button" id="delbut" name="delbut" onclick="minusrow(1);"
value="Only way to delete row 1" />
</form>
</body>
</html>
