Error with creating new cells/rows in a table.

Discussion in 'Javascript' started by BethH, Oct 5, 2007.

  1. BethH

    BethH Guest

    Kind of complicated. I'll try to break it down. This is some code I
    did to continually add more input boxes to a table, and format them to
    four input boxes a row.

    This is the code in question:

    var WBi = 0;
    var WBTR = 1;

    function AddWB(){

    WBi++;

    var ThisTable = document.getElementById('tblWB');
    var newTR = "wb"+WBTR;
    newTR = document.getElementById(newTR);

    if(WBi % 4 == 0){

    WBTR++;

    newTR = document.createElement("tr");
    newTR.id = 'wb'+WBTR;
    ThisTable.appendChild(newTR);
    }

    var newTD = document.createElement("td");

    newTR.appendChild(newTD);

    newTD.innerHTML="Wellbore Purchase:<br><input type='text' name='WB"+WBi
    +"'>";

    }

    In the page I have this:

    <table width="100%" border="0"><tbody id="tblWB"><tr id="wb1">
    <td><input type="button" value="Add WellBore Purchase"
    onClick="AddWB();"></td></tr></tbody></table>

    The page loads fine. I can click that button four times without
    issues (it will create the three on the first row and one on the
    second). Then it breaks, with this error:

    Line: 33
    Character: 1
    Code: 0
    Error Message: Unexpected call to method or property access.
    URL: http://localhost/cmmmock/wells/edit.html

    Line 33 is this one: newTR.appendChild(newTD);

    I'm sure this is something stupid, but I'm just not getting it, and I
    can't find a javascript debugger that does more than highlight your
    code. Thanks. I know where the code is. Useless piece of fluff!
    <shakes tiny fist in futile rage>

    So, two questions, what am I missing here, and does anyone know of a
    script debugger that's worth having?
     
    BethH, Oct 5, 2007
    #1
    1. Advertisements

  2. BethH

    RobG Guest

    On Oct 5, 12:28 pm, BethH <> wrote:
    > Kind of complicated. I'll try to break it down. This is some code I
    > did to continually add more input boxes to a table, and format them to
    > four input boxes a row.
    >
    > This is the code in question:


    The code is pretty ugly, there are much better ways to go about this.


    > var WBi = 0;
    > var WBTR = 1;
    >
    > function AddWB(){
    >
    > WBi++;
    >
    > var ThisTable = document.getElementById('tblWB');
    > var newTR = "wb"+WBTR;
    > newTR = document.getElementById(newTR);
    >
    > if(WBi % 4 == 0){
    >
    > WBTR++;
    >
    > newTR = document.createElement("tr");
    > newTR.id = 'wb'+WBTR;
    > ThisTable.appendChild(newTR);
    >
    > }
    >
    > var newTD = document.createElement("td");
    >
    > newTR.appendChild(newTD);
    >
    > newTD.innerHTML="Wellbore Purchase:<br><input type='text' name='WB"+WBi
    > +"'>";
    >
    > }
    >
    > In the page I have this:
    >
    > <table width="100%" border="0"><tbody id="tblWB"><tr id="wb1">
    > <td><input type="button" value="Add WellBore Purchase"
    > onClick="AddWB();"></td></tr></tbody></table>
    >
    > The page loads fine. I can click that button four times without
    > issues (it will create the three on the first row and one on the
    > second). Then it breaks, with this error:


    In IE, right?

    >
    > Line: 33
    > Character: 1
    > Code: 0
    > Error Message: Unexpected call to method or property access.
    > URL:http://localhost/cmmmock/wells/edit.html
    >
    > Line 33 is this one: newTR.appendChild(newTD);
    >
    > I'm sure this is something stupid, but I'm just not getting it, and I
    > can't find a javascript debugger that does more than highlight your
    > code. Thanks. I know where the code is. Useless piece of fluff!
    > <shakes tiny fist in futile rage>
    >
    > So, two questions, what am I missing here, and does anyone know of a
    > script debugger that's worth having?


    Your problem is with IE - you create inputs with names that are the
    same as the ID's of the table rows. IE doesn't distinguish between
    names and IDs.

    Anyhow, I think I know what you are trying to do, so try:


    <script>
    function addWB(id) {
    var tblBody = document.getElementById(id);
    var WBTR = tblBody.rows.length;
    var row = tblBody.rows[WBTR - 1];
    var cell;
    if (row.cells.length == 4) {
    row = tblBody.insertRow(-1);
    row.id = 'wb' + WBTR;
    }
    var cell = row.insertCell(-1);
    cell.innerHTML = 'Wellbore Purchase:<br><input ' +
    'type="text" name="WB' + WBi + '">';
    }
    </script>

    <table>
    <tbody id="tblWB">
    <tr id="wb1">
    <td><input type="button" value="Add WellBore Purchase"
    onClick="addWB('tblWB');">
    </tbody>
    </table>


    --
    Rob
     
    RobG, Oct 5, 2007
    #2
    1. Advertisements

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. Rob Meade
    Replies:
    4
    Views:
    7,556
    Rob Meade
    Nov 25, 2003
  2. martin
    Replies:
    1
    Views:
    2,796
    Eliyahu Goldin
    Jun 9, 2004
  3. Fetty
    Replies:
    1
    Views:
    425
    Alvin Bruney [MVP - ASP.NET]
    May 11, 2005
  4. Luigi Donatello Asero
    Replies:
    0
    Views:
    407
    Luigi Donatello Asero
    Nov 17, 2004
  5. JMick
    Replies:
    0
    Views:
    875
    JMick
    Mar 11, 2010
Loading...

Share This Page