-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

IEの少なくとも一部のバージョンでは失敗するように指定されているため、innerHTMLを使用してテーブル行（またはテーブルの任意の部分）のコンテンツを変更しないでください。DOMメソッドを使用します。テーブル全体またはセルのコンテンツ（TD要素）にinnerHTMLを使用できます。

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 に答える