javascript - IE 显示 innerHTML 的运行时错误

Question

我有一个 jsp 页面，其中的行是使用 java 脚本动态创建到表中的。它在除 IE 之外的所有浏览器中都工作正常。在 IE 中它显示错误未知运行时错误..

我附上了java脚本函数

   function addrow(tableID) {
        try{
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount-1);


        var mystring1='<td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>';

row.innerHTML =mystring1;

    }catch(e) {
        alert(e);
    }
    }

HTML部分

<table id="table1" width="792" border="0">

<tr class="rowdiv">
      <td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
      <td class="formgap"></td>
      <td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td>
      <td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
      </tr>

      <tr class="rowdiv">
        <td width="170" class="formlabel">&nbsp;</td>
        <td class="formfield">&nbsp;</td>
        <td class="formgap"></td>
        <td class="formlabel">&nbsp;</td>
        <td class="formfield"><h6 onclick="addrow('table1')">Add policy</h6></td>
      </tr>

    </table>

实际上我已经尝试使用第二个函数将表格添加到一行中..

var mystring2='<td><table width="200" border="1" class="tableborder" align="center"><tr class="rowdiv"><td width="799" class="formheader" ><h4>Comany Details</h4></td></tr><tr><td width="799"><table id="table'+rowCount+'" width="792" border="0"><tr class="rowdiv"><td width="170" class="formlabel"><h4>Company ID&nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield">&nbsp;</td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Company &nbsp;&nbsp;&nbsp; Name &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><input type="text" name="type" id="type" size="30"/></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Address &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><textarea name="textarea" id="textarea" cols="28" rows="2"></textarea></td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Phone Number &nbsp;&nbsp;&nbsp;</h4></td><td width="205" class="formfield"><h6><input type="text" name="type2" id="type2" size="30"/></h6></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Fax Number &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type3" id="type3" size="30"/></td><td class="formgap"></td><td width="170" class="formlabel"><h4>E Mail &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type5" id="type5" size="30"/></td></tr><tr class="rowdiv"><td class="formlabel"><h4>Web Site &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type7" size="30"/></td><td class="formgap"></td><td class="formlabel">&nbsp;</td><td class="formfield">&nbsp;</td></tr><tr class="rowdiv"><td class="formlabel"><h4>Type &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description &nbsp;&nbsp;&nbsp;</h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td></tr><tr class="rowdiv"><td width="170" class="formlabel">&nbsp;</td><td class="formfield">&nbsp;</td><td class="formgap"></td><td class="formlabel">&nbsp;</td><td class="formfield"><h6 onclick="addrow('+"'table"+rowCount+"'"+')"><a href="#">Add row</a></h6></td></tr></table></td></tr> </table></td>';

所有这些代码都适用于 chrome 和 firefox..

Answer 1

出现此错误是因为多个元素的 innerHTML属性(property)，包括<tr>是只读的 ^{[ source ]}(在 IE 6-8 中测试)。要解决此问题，最好的方法是使用 insertCell方法:

通用的“惰性”方法:(演示:http://jsfiddle.net/VLjhW/2/)

// Variables mystring2, rowCount and table as defined in the question.
var tmp = document.createElement('div');         // <-- Placeholder
tmp.innerHTML = '<table><tr>' + mystring2 + '</tr></table>';
var row = tmp.firstChild.rows[0];                // <-- Created "real" row

var newrow = table.insertRow(table.rows.length); // <-- New dummy row
newrow.parentNode.replaceChild(row, newrow);     // <-- Replace dummy with real row

---

另一种方法:

演示:http://jsfiddle.net/VLjhW/

// Array of innerHTML properties for each cell
var cells = ['<h4>Type &nbsp;&nbsp;&nbsp;</h4>',
             '<input type="text" name="type7" id="type8" size="30"/>',
             '',
             '<h4>Description &nbsp;&nbsp;&nbsp;</h4></td>',
             '<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>'];
// Array of `class=` attributes for each cell
var cellClasses = ['formlabel', 'formfield', 'formgap', 'formlabel', 'formfield'];

var table = document.getElementById('t1');     // <-- table
var tr = table.insertRow(table.rows.length-1); // <-- Last row
for (var i=0; i<cells.length; i++) {
    var td = tr.insertCell(i);                 // <-- Insert cell
    td.className = cellClasses[i];             // <-- Set class attribute
    td.innerHTML = cells[i];                   // <-- Set innerHTML
}