Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > onclick event in DOM table

Reply
Thread Tools

onclick event in DOM table

 
 
Michael_R_Banks
Guest
Posts: n/a
 
      02-16-2007
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>

 
Reply With Quote
 
 
 
 
Michael_R_Banks
Guest
Posts: n/a
 
      02-17-2007
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

 
Reply With Quote
 
 
 
 
Une Bévue
Guest
Posts: n/a
 
      02-17-2007
Michael_R_Banks <(E-Mail Removed)> wrote:

> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DOMNodeInserted equivalent event for IE (DOM Updated, DOM Added,...) Steve Javascript 6 03-05-2008 10:43 AM
JavaScript errors trying to add event listeners for onclick() using DOM and AJAX donpro Javascript 0 10-29-2007 05:29 PM
How to pass a parameter using the dom in a.onclick = function() {...} event? SM Javascript 2 05-27-2007 11:02 AM
How do I add a class to an <a> tag on a onclick() event using Javascipt/DOM? SM Javascript 4 05-26-2007 04:07 AM
DOM onClick event (works in FF and does not work in IE) Moses Javascript 3 03-19-2007 04:08 AM



Advertisments