IE innerHTML help

JavaScript
1

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


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;

}

                            
<table  id="problems-details-table">

                            </table>
2

It’s probably better to use the DOM methods to create the table elements and their content in your function.

3

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”>
‘;
for(var i=0; i<conditions.length; i++)
{ con = conditions[i];
details+=’<tr>
<td width=“20%”>’+con.test+‘<\/td>
‘;
details+=’<td width=“8%”>’+con.test1+‘<\/td>
‘;
details+=’<td width=“7%”>’+con.test2+'<\/td>
<\/tr>
‘;
}
details+=’<\/table>
';
document.getElementById(“holder”).innerHTML = details;
}
// -------------------
//–>
</script>
</head>

<body onload=“insertConditionData()”>

<div id=“holder”>
</div>
<!-- end holder div –>

</body>

</html>

4

Sorry typo, remove the first

var trElement    = document.createElement('tr');
5

Not as simple but it works in all browsers

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);
}
6

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?

7

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)

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;
  }
}
8

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.