SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE innerHTML help

    I'm aware that innerHTML does not work well with IE when it comes to tables. I'm got a script that works well in firefox but I can't seem to get it to play with IE. Do you have any suggestions on how to make it work with IE short of redoing all of it?

    Thanks for your help.

    Javascript Function
    Code JavaScript:
    function insertConditionData()
    {     
        var details = "<tbody>";
        for(var i=0; i<conditions.length; i++) {
            var con = conditions[i];
            details += '<tr>'+
                      '<td width="20%">'+con.test+'</td>'+
                      '<td width="8%">'+con.test1+'</td>'+
                      '<td width="7%">'+con.test2+'</td>'+
                      '</tr>';
     
        }
        details += "</tbody>";
     
        document.getElementById("problems-details-table").innerHTML = details;
     
    }

    Code HTML4Strict:
    <table  id="problems-details-table">
     
                                </table>
    Follow Me On Twitter: BryceRay

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably better to use the DOM methods to create the table elements and their content in your function.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Not as simple but it works in all browsers

    Code JavaScript:
    function insertConditionData()
    {
        // Create the main TABLE elements
        var tbodyElement = document.createElement('tbody');
        var trElement    = document.createElement('tr');
     
        for(var i=0; i<conditions.length; i++)
        {
            var con = conditions[i];
     
            // Create and set the TD elements
            var trElement = document.createElement('tr'), tdElement1 = document.createElement('td'), tdElement2 = document.createElement('td'), tdElement3 = document.createElement('td');
            tdElement1.setAttribute('width', '20%'), tdElement2.setAttribute('width', '8%'), tdElement3.setAttribute('width', '7%');
            tdElement1.innerHTML = con.test, tdElement2.innerHTML = con.test1, tdElement3.innerHTML = con.test2;
     
            // Append the TR, TD elements to the TBODY element
            tbodyElement.appendChild(trElement), tbodyElement.appendChild(tdElement1), tbodyElement.appendChild(tdElement2), tbodyElement.appendChild(tdElement3);
        }
     
        // Append the TBODY element to the TABLE element
        document.getElementById("problems-details-table").appendChild(tbodyElement);
    }

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry typo, remove the first

    Code JavaScript:
    var trElement    = document.createElement('tr');

  5. #5
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can this process be simplified by using a library such as jQuery? Or is it just as messy. The reason I ask is it will get very messy since most of my tables have around 10 columns.
    Follow Me On Twitter: BryceRay

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,825
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bar338 View Post
    Can this process be simplified by using a library such as jQuery? Or is it just as messy. The reason I ask is it will get very messy since most of my tables have around 10 columns.
    All jQuery will do is to add a large number of extra uncalled functions to the one you already have there.

    There is one much quicker way of manipulating table elements (at least it is quicker in all browsers except Firefox and in Opera its about 500% faster) and that is to directly access the table properties to do the updates rather than going through createElement() every time.

    It would look something like this (untested)

    Code:
    function insertConditionData()
    {
        var tbl = document.getElementById("problems-details-table");
        var pos = tbl.rows.length;
    
        for(var i=0; i<conditions.length; i++)
        {
            var con = conditions[i];
            
            // Create and set the TD elements
            tbl.insertRow(pos++);
            for (var j=0; j<3;j++) tbl.rows[pos].insertCell(j);
            tbl.rows[pos].cells[0].setAttribute('width', '20%'); 
            tbl.rows[pos].cells[1].setAttribute('width', '8%'); 
            tbl.rows[pos].cells[2].setAttribute('width', '7%');
            tbl.rows[pos].cells[0].innerHTML = con.test;
            tbl.rows[pos].cells[1].innerHTML = con.test1;
            tbl.rows[pos].cells[3].innerHTML = con.test2;
      }
    }
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Were getting closer. The method felgall suggested works great in IE, but in firefox nothing shows up. Any ideas what could be causing this and what I can do to get it working in both browsers?
    Follow Me On Twitter: BryceRay

  8. #8
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You will get a better result if you write the whole table to a div on the page, rather than part of the table. The following script works in all major browsers. I have invented some data so you can see it working. The <tbody> is automatically inserted into the table if you do it this way.

    <html>

    <head>

    <script type="text/javascript">
    <!--
    var conditions=new Array();
    conditions[conditions.length]={test:200,test1:5000,test2:20 }
    conditions[conditions.length]={test:320,test1:100,test2:5 }
    conditions[conditions.length]={test:6000,test1:40,test2:167 }
    // ---------------------
    function insertConditionData()
    { var con=null;
    var details='<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="300">\n';
    for(var i=0; i<conditions.length; i++)
    { con = conditions[i];
    details+='<tr>\n<td width="20&#37;">'+con.test+'<\/td>\n';
    details+='<td width="8%">'+con.test1+'<\/td>\n';
    details+='<td width="7%">'+con.test2+'<\/td>\n<\/tr>\n';
    }
    details+='<\/table>\n';
    document.getElementById("holder").innerHTML = details;
    }
    // -------------------
    //-->
    </script>
    </head>

    <body onload="insertConditionData()">

    <div id="holder">
    </div>
    <!-- end holder div -->

    </body>

    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •