DOM table simple question

Discussion in 'Javascript' started by King Albert, May 14, 2006.

  1. King Albert

    King Albert Guest

    Why does the 'insertrow' work in this situation:

    <html>
    <script type="text/javascript">
    function addRow(tableID) {
    var tableRef = document.getElementById(tableID);
    var newRow = tableRef.insertRow(2);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode('New second cell')
    newCell.appendChild(newText);
    }
    </script>
    <table id="TableA">
    <tr><td>firstcell</td><tr>
    <tr><td>secondcell</td><tr>
    <tr><td>thirdcell</td><tr>
    </table>
    <input type="button" value="try me" onclick="addRow('TableA');">
    </html>


    But not here (I didn't even bother to do the insertRow(2) here because
    the domtable contains zero rows, I get 'index or size is negative or
    greater than the nbr of rows') - just run the html below, please :

    <html>
    <head>
    <script>
    var arr=[];
    arr[0]="first row";
    arr[1]="second row";
    arr[2]="third row";
    arr[3]="fourth row";
    function domtable() {
    var myrow, mytd, mytext, mytable, attr;
    mytable=document.createElement("table");
    mytable.id='mijntabel';
    for (i=0; i < arr.length ;i++){
    myrow=document.createElement("tr");
    mytd=document.createElement("td");
    mytext=document.createTextNode(arr);
    mytd.appendChild(mytext);
    myrow.appendChild(mytd);
    mytable.appendChild(myrow);

    }
    document.body.appendChild(mytable);
    }
    function howmanyrows() {
    var eerstetabel = document.getElementsByTagName("table");
    alert('the browser says that this table has ' + eerstetabel
    [0].rows.length + ' rows, which is not true');
    }
    </script>
    </head>
    <body>
    <input type="button" value="run me first" onclick="domtable();">
    <input type="button" value="then check the number of rows"
    onclick="howmanyrows();">
    </body>
    </html>

    It appears you can only "count" the number of rows in a real html table.
    In my app I have a DOM table whose rows start with a plus sign. If you
    click the plus, a new row should insert beneath it. Do I really have to
    "id attribute" every single 'plus cell', I was hoping I could use the
    index of my for loop.
    I also read some about tbody, but why is tbody not necessary in the first
    example?

    Targetbrowser is FF 1.5

    thx for any advise.



    Ward
    King Albert, May 14, 2006
    #1
    1. Advertising

  2. King Albert wrote:


    > mytable=document.createElement("table");


    Create a tbody e.g.
    var tbody = document.createElement("tbody");
    mytable.appendChild(tbody);
    then insert the rows into the tbody e.g.

    > mytable.appendChild(myrow);


    tbody.appendChild(myrow);

    If the HTML parser parses the HTML table markup then it implicitly
    creates a tbody child if it is not in the markup.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, May 14, 2006
    #2
    1. Advertising

  3. King Albert

    King Albert Guest

    Martin Honnen <> wrote in news:44675a6f$0$11078
    $-online.net:

    >
    >
    > King Albert wrote:
    >
    >
    >> mytable=document.createElement("table");

    >
    > Create a tbody e.g.
    > var tbody = document.createElement("tbody");
    > mytable.appendChild(tbody);
    > then insert the rows into the tbody e.g.
    >
    >> mytable.appendChild(myrow);

    >
    > tbody.appendChild(myrow);
    >
    > If the HTML parser parses the HTML table markup then it implicitly
    > creates a tbody child if it is not in the markup.
    >



    thx for your advise,

    The alert box below now acknowledges 4 rows.
    Thx very much,

    Ward

    <html>
    <head>
    <script>
    var arr=[];
    arr[0]="first row";
    arr[1]="second row";
    arr[2]="third row";
    arr[3]="fourth row";

    function domtable() {
    var myrow, mytd, mytext, mytable, attr;
    mytable=document.createElement("table");
    mytable.id='mijntabel';
    mytbody=document.createElement("tbody");

    for (i=0; i < arr.length ;i++){
    myrow=document.createElement("tr");
    mytd=document.createElement("td");
    mytext=document.createTextNode(arr);
    mytd.appendChild(mytext);
    myrow.appendChild(mytd);
    mytbody.appendChild(myrow);
    }
    mytable.appendChild(mytbody);
    document.body.appendChild(mytable);


    }


    function howmanyrows() {
    var eerstetabel = document.getElementsByTagName("tbody");
    alert('the browser says that this table has ' + eerstetabel
    [0].rows.length + ' rows, which is true');


    }
    </script>
    </head>
    <body>

    <input type="button" value="run me first" onclick="domtable();">

    <input type="button" value="then check the number of rows"
    onclick="howmanyrows();">

    </body>

    </html>
    King Albert, May 14, 2006
    #3
  4. King Albert

    RobG Guest

    King Albert wrote:
    > Martin Honnen <> wrote in news:44675a6f$0$11078
    > $-online.net:
    >
    >>
    >> King Albert wrote:
    >>
    >>
    >>> mytable=document.createElement("table");

    >> Create a tbody e.g.
    >> var tbody = document.createElement("tbody");
    >> mytable.appendChild(tbody);
    >> then insert the rows into the tbody e.g.
    >>
    >>> mytable.appendChild(myrow);

    >> tbody.appendChild(myrow);
    >>
    >> If the HTML parser parses the HTML table markup then it implicitly
    >> creates a tbody child if it is not in the markup.
    >>

    >
    >
    > thx for your advise,
    >
    > The alert box below now acknowledges 4 rows.
    > Thx very much,


    An alternative is to use insertRow(-1) which will insert the row as the
    last row and you don't have to explicitly create the tbody. Use
    insertCell(-1) for the cells.


    > <html>
    > <head>
    > <script>
    > var arr=[];
    > arr[0]="first row";
    > arr[1]="second row";
    > arr[2]="third row";
    > arr[3]="fourth row";
    >
    > function domtable() {
    > var myrow, mytd, mytext, mytable, attr;
    > mytable=document.createElement("table");
    > mytable.id='mijntabel';
    > mytbody=document.createElement("tbody");
    >
    > for (i=0; i < arr.length ;i++){
    > myrow=document.createElement("tr");
    > mytd=document.createElement("td");
    > mytext=document.createTextNode(arr);
    > mytd.appendChild(mytext);
    > myrow.appendChild(mytd);
    > mytbody.appendChild(myrow);
    > }
    > mytable.appendChild(mytbody);



    Or don't insert the tbody and:

    for (var i=0; i < arr.length ;i++){
    myrow = mytable.insertRow(-1);
    mytd = myrow.insertCell(-1);
    mytd.appendChild(document.createTextNode(arr));
    }

    > document.body.appendChild(mytable);
    >
    >
    > }


    [...]

    --
    Rob
    RobG, May 14, 2006
    #4
    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. Thorsten Meininger
    Replies:
    0
    Views:
    431
    Thorsten Meininger
    Jul 28, 2004
  2. Rio
    Replies:
    4
    Views:
    1,172
  3. Thorsten Meininger
    Replies:
    0
    Views:
    495
    Thorsten Meininger
    Jul 28, 2004
  4. mike
    Replies:
    1
    Views:
    1,092
    Martin Honnen
    Nov 20, 2004
  5. Replies:
    0
    Views:
    534
Loading...

Share This Page