Question

我有一个向表中添加新行的函数，但由于每个td都有很多内部节点（每个节点有很多属性），我只是更改了行的.innerHTML。

但是这会导致其他功能出现问题，因为未插入#text节点。

我已经尝试添加<text/>标签，但没有这样做..那么......有什么建议吗？

我的javascript代码是：

var newTrNode = document.createElement('tr');
newTrNode.setAttribute('id', resultArray[0]);

var putInside = '<td><text/><input readonly="readonly" value="'+assetName+'" type="text"  class="field left"/></td><td><input type="text" value="credentials" class="field left" readonly="readonly" /></td><td>';
var rowNode = but.parentNode.parentNode;                                                                    
putInside += rowNode.childNodes[5].innerHTML;
putInside += '</optgroup></select></td><td><input type="text" value="'+resultArray[1]+'" class="field left" readonly="readonly" /></td><td><input type="password" value="'+resultArray[2]+'" class="field left" readonly="readonly" /></td><td><input onClick="editField('+resultArray[0]+',this)"type="button" value="Edit" class="field left"/><input onClick="deleteAsset('+resultArray[0]+')" type="button" value="Delete" class="field left"/><input onClick="lockUnlock('+resultArray[0]+',this, false)" type="button" value="Unlock" class="field left"/><img src="lock.png"/></td>';
newTrNode.innerHTML = putInside;

Answer 1

不要使用innerHTML来修改表行（或表的任何部分）的内容，因为它至少在某些版本的IE中是specified to fail。使用DOM方法。您可以将innerHTML用于整个表格或单元格的内容（TD元素）。

HTML中没有文本元素，浏览器会为文档中的文本创建文本节点。您可以使用文档界面的createTextNode方法创建文本节点：

var textNode = document.createTextNode('text');

您可以使用innerHTML添加行，其功能如下：

<script type="text/javascript">

function rowsFromMarkup(table, markup) {
  var div = document.createElement('div');
  div.innerHTML = '<table>' + markup + '<\/table>';
  var rows = div.getElementsByTagName('tr');
  var tbody = table.tBodies[0];

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    tbody.appendChild(rows[i]);
  }
}
</script>

<table id="t0">
 <thead>
  <tr>
    <th>index
    <th>item
 </thead>
 <tbody>
  <tr>
   <td>0
   <td>foo
 </tbody
</table>

<button onclick="
 rowsFromMarkup(document.getElementById('t0'),'<tr><td>1<td>bar');
">Add a row</button>

用#text添加tr元素的Javascript

1 个答案: