-1

我有一个向表中添加新行的功能，但由于每个 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;
4

1 回答 1

2

不要使用 innerHTML 来修改表格行（或表格的任何部分）的内容，因为至少在某些版本的 IE 中它被指定为失败。使用 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>
于 2012-09-10T22:19:43.153 回答