JavaScript在Chrome中起作用，但不是IE9

Question

我正面临JavaScript的问题。我看到它在Chrome中工作正常，但在IE9中不行。这不会按预期显示Chrome在网页上显示的内容。我是新手的Javascripting，我可以在解决此问题方面得到帮助。

<script type="text/javascript">
                var tds = document.getElementById('course_table')
                        .getElementsByTagName('td');
                var sum = 0;
                for (var i = 0; i < tds.length; i++) {
                    if (tds[i].className == 'count-me') {
                        sum += isNaN(tds[i].innerHTML) ? 0
                                : parseInt(tds[i].innerHTML);
                    }
                }
                var lastrecord = tds[tds.length - 2].innerHTML;
                var table = document.getElementById('course_table')
                        .getElementsByTagName('tr');
                var max = table.length - 2;
                document.getElementById('course_table').innerHTML += '<tr bgcolor=#FFCCFF><td></td><td>Total Courses</td><td>' + max + '</td><td>Total Credits Remaining</td><td>'+ sum + '</td><td> Expected Graduation Date</td><td></td><td>' + lastrecord + '</td><td></td></tr> ';
            </script>

谢谢niveditha

Answer 1

问题很可能在最后一行：

document.getElementById('course_table').innerHTML += '<tr bgcolor=#FFCCFF><td></td><td>fsffd</td><td>' + max + '</td><td>abcdRemaining</td><td>'+ sum + '</td><td> abc</td><td></td><td>' + lastrecord + '</td><td></td></tr> ';

ie不处理字符串添加tr s；此外，它是非标准的。用此替换该行，它可以编程地构建行，并且更快。我将相应的<td>添加为注释。

var table = document.getElementById('course_table');
var row = table.insertRow(-1);
row.style.backgroundColor = '#FFCCFF'; // `bgcolor` attribute is deprecated
row.insertCell(-1); // <td></td>
row.insertCell(-1).textContent = "fsffd"; // <td>fsffd</td>
row.insertCell(-1).textContent = max; // <td>' + max + '</td>
row.insertCell(-1).textContent = "abcdRemaining"; // <td>abcdRemaining</td>
row.insertCell(-1).textContent = sum; // <td>' + sum + '</td>
row.insertCell(-1).textContent = "abc"; // <td> abc</td>
row.insertCell(-1); // <td></td>
row.insertCell(-1).textContent = lastRecord; // <td>' + lastRecord + '</td>
row.insertCell(-1); // <td></td>

这里的重要方法是inserstrow和Insertcell，它们可以保证起作用。textContent比innerHTML更快，更安全。请使用CSS代替弃用的bgcolor属性

Answer 2

Internet Explorer不喜欢以这种方式向<table>添加<tr>元素。您的可以做的是将新的<tbody>元素附加到表：

// ... the first part of your function ...
var lastrecord = tds[tds.length - 2].innerHTML;
var table = document.getElementById('course_table');
var newbody = document.createElement('tbody');
newbody.innerHTML = '<tr bgcolor=#FFCCFF><td></td><td>Total Courses</td><td>' + max + '</td><td>Total Credits Remaining</td><td>'+ sum + '</td><td> Expected Graduation Date</td><td></td><td>' + lastrecord + '</td><td></td></tr> ';
table.appendChild(newbody);