Loading ...
Sorry, an error occurred while loading the content.
 

innerHTML problem

Expand Messages
  • Paul Cowan
    Hi, Can anyone tell my I cannot set the innerHTML property of a table like this: var mainTable = document.all( X + cell.id).firstChild; var contextTable
    Message 1 of 2 , Jul 1, 2004
      Hi,

      Can anyone tell my I cannot set the innerHTML property of a table <tr> like
      this:

      var mainTable = document.all('X' + cell.id).firstChild;
      var contextTable = document.all('XCUSTOMER').firstChild;

      for(var i = 0;i < contextTable.rows.length;i++){
      var contextRow = contextTable.rows[i]
      var newRow = mainTable.insertRow();
      newRow.innerHTML = contextRow.innerHTML;
      }

      The line:

      newRow.innerHTML = contextRow.innerHTML;

      gives me a runtime error.

      Thanks

      Paul
    • Jon Stephens
      That s because innerHTML is a *string* made up of actual HTML markup, whereas the DOM collections and methods work with *objects*. Also, innerHTML doesn t
      Message 2 of 2 , Jul 1, 2004
        That's because innerHTML is a *string* made up of actual HTML markup,
        whereas the DOM collections and methods work with *objects*.

        Also, innerHTML doesn't include the tags for the element it's called on,
        only those contained within that tag. If you have a table row such as

        <tr id="myRow"><td>A</td><td>B</td></tr>

        then document.getElementById("myRow").innerHTML contains the string
        "<td>A</td><td>B</td>".

        Your solution doesn't use innerHTML at all, what it does is to get the
        cell objects from the original table's DOM tree, create new row objects
        belonging to the second table, and add then add those cells to the new rows.

        If you need to copy all the rows from one table to another, a much
        quicker way is to use cloneNode() and taking advantage of the fact that
        all tables are considered by the DOM to have at least one <tbody>
        element, whether or not it's present in your HTML markup:

        var copyRows(mainTable, contextTable)
        {
        var contextTBody =
        contextTable.getElementsByTagName("TBODY")[0].cloneNode(true);

        mainTable.appendChild(contextTBody);
        }

        The first line gets a copy of the contaxtTable's first <tbody> element
        along with all of its descendants as an object. The second line appends
        this tree to mainTable following its last child element, which should be
        a <tbody> element. mainTable will now have a second <tbody> element
        containing all the rows/cells copied from contextTable.

        You can do the same thing with innerHTML like so:

        var copyRows(mainTable, contextTable)
        {
        var contextTBody = contextTable.getElementsByTagName("TBODY")[0];
        var mainTBody = mainTable.getElementsByTagName("TBODY")[0];

        contextTBodyHtml = contextTBody.innerHTML;

        mainTBody.innerHTML += contextTBodyHtml;
        }

        To *move* what's inside the first table to inside the second one as
        opposed to copying it, do this:

        var moveRows(mainTable, contextTable)
        {
        var contextTBody = contextTable.getElementsByTagName("TBODY")[0];

        mainTable.appendChild( contextTable.removeChild(contextTBody) );
        }

        This removes the <tbody> from the first table and appends it to the
        second table (following the second table's <tbody element>).

        To do a row-by-row copy:

        var copyRows(mainTable, contextTable)
        {
        var contextTBody = contextTable.getElementsByTagName("TBODY")[0];
        var mainTBody = = mainTable.getElementsByTagName("TBODY")[0];
        var contextRows = contextTbody.getElementsByTagName("TR");

        for(var i = 0; i < contextRows.length; i++)
        mainTableTBody.appendChild( contextRows[i].cloneNode(true) );
        }

        As you can see, I don't usually bother with the rows and cells
        collections from HTML-DOM, I just use getElementsByTagName(). Also I
        don't like innerHTML very much. Well, it's probably better to say that
        it's a handy shortcut occasionally, but it can also get in the way
        sometimes as well. ;)

        Anyhow... there's many ways to handle this issue depending on whether
        you're wanting to move elements or copy them, and your own preferences.

        Hope my little ramble has helped.

        cheers

        j.

        > Message: 12
        > Date: Thu, 01 Jul 2004 14:35:00 +0000
        > From: "Paul Cowan" <dagda1@...>
        > Subject: RE: innerHTML problem
        >
        > Hi,
        >
        > I did get round it by setting the innerHTML of the individual table cells
        > like the code below but I'm still curious why I could not add the innerHTML
        > for the <tr>, can anyone enlightem me in this strangeness
        >
        > function insertContextRows(mainTable, contextTable){
        > for(var i = 0;i < contextTable.rows.length;i++){
        > var contextRow = contextTable.rows[i]
        > var newRow = mainTable.insertRow();
        > for(var j=0;j < contextRow.cells.length;j++){
        > var contextCell = contextRow.cells[j];
        > var newCell = newRow.insertCell();
        > }
        > }
        > }
        >
        >
        >
        >
        > dagda1@...
        >
        >
        >
        >
        >
        >>>From: "Paul Cowan" <dagda1@...>
        >>>Reply-To: javascript_official@yahoogroups.com
        >>>To: javascript_official@yahoogroups.com
        >>>Subject: [JavaScript] innerHTML problem
        >>>Date: Thu, 01 Jul 2004 13:47:58 +0000
        >>>
        >>>Hi,
        >>>
        >>>Can anyone tell my I cannot set the innerHTML property of a table <tr> like
        >>>this:
        >>>
        >>>var mainTable = document.all('X' + cell.id).firstChild;
        >>>var contextTable = document.all('XCUSTOMER').firstChild;
        >>>
        >>>for(var i = 0;i < contextTable.rows.length;i++){
        >>> var contextRow = contextTable.rows[i]
        >>> var newRow = mainTable.insertRow();
        >>> newRow.innerHTML = contextRow.innerHTML;
        >>>}
        >>>
        >>>The line:
        >>>
        >>>newRow.innerHTML = contextRow.innerHTML;
        >>>
        >>>gives me a runtime error.
        >>>
        >>>Thanks
        >>>
        >>>Paul
      Your message has been successfully submitted and would be delivered to recipients shortly.