onclick event in DOM table

Discussion in 'Javascript' started by Michael_R_Banks, Feb 16, 2007.

  1. 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>
    Michael_R_Banks, Feb 16, 2007
    #1
    1. Advertising

  2. 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
    Michael_R_Banks, Feb 17, 2007
    #2
    1. Advertising

  3. Michael_R_Banks

    Une Bévue Guest

    Michael_R_Banks <> 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
    Une Bévue, Feb 17, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Moses
    Replies:
    3
    Views:
    190
  2. SM
    Replies:
    4
    Views:
    89
  3. SM
    Replies:
    2
    Views:
    149
  4. donpro
    Replies:
    0
    Views:
    95
    donpro
    Oct 29, 2007
  5. Steve
    Replies:
    6
    Views:
    242
    Thomas 'PointedEars' Lahn
    Mar 5, 2008
Loading...

Share This Page