JavaScript可在Chrome中使用，但不能在ie9中使用

Question

我遇到了JavaScript的问题。我发现它在chrome中可以正常工作，但在IE9中却不能正常工作。 我是JavaScript语言的新手，我可以帮助您解决此问题。

<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>

谢谢妮维迪莎

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 ； 除了它是非标准的。 用该行替换该行，以编程方式建立该行并且速度更快。 我添加了相应的<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>

这里重要的方法是insertRow和insertCell ，保证可以使用。 textContent比innerHTML更快，更安全。 请使用CSS代替不推荐使用的bgcolor属性

Answer 2

Internet Explorer不喜欢以这种方式将<tr>元素添加到<table>中。 您可以做的是将一个新的<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);