By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,820 Members | 1,051 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,820 IT Pros & Developers. It's quick & easy.

onclick event in DOM table

P: n/a
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>

Feb 16 '07 #1
Share this Question
Share on Google+
3 Replies

P: n/a
On Feb 16, 10:47 am, "Michael_R_Banks" <michaelrba...@satx.rr.com>
wrote:
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>

Quick lesson in troubleshooting: When you're having a problem, reduce
it. We could have done without all of this clutter about tables,
since your problem has nothing to do with tables, and only to do with
the way you're assigning your event. So take out that one piece, the
technique you're using to assign the event, and see if it works by
itself.

It doesn't, because the onclick property of your HTMLElement object is
called as a method, and you've set it to a string value:

element.onclick = 'alert("something")'; // doesn't work

Your options include (but are not limited to):

1.
element.setAttribute('onclick', 'alert("hi")');
2.
function elClick() { alert('hi'); } // create a function object - put
this in your global scope to avoid closure memory leaks
....
// elsewhere...
element.onclick = elClick;

3.
element.onclick = new Function('alert("hi");');

And that's not including the DOM Level 2 methods, which you'll need to
learn about soon. But first, basic troubleshooting/problem reduction
skills come in mighty handy...

-David

Feb 17 '07 #2

P: n/a
I had a feeling it was something like that, I just am too new to JS to
get the syntax right. Thanks for the help -- the element.onclick =
new Function(xxxx); did the trick.

Regards,
Michael

Feb 17 '07 #3

P: n/a
Michael_R_Banks <mi***********@satx.rr.comwrote:
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.
see :
<http://www.yvon-thoraval.com/Events/onclick_event_in_DOM_table.xhtml>

i don't know if this fits your needs, but it works ))
--
Une Bévue
Feb 17 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.