1

テーブルがあり、ボタンをクリックして新しい行を追加できる状況があります。行はサーバーによって動的に生成され、HTML で返されます。したがって、基本的に私がする必要があるのは、新しい行を古いテーブルの前に置くことです。このようなもの：

tableelement.innerHTML = newHtml + tableelement.innerHTML;

それは確かに機能しますが、テーブルヘッダーがあり、明らかに、その後に新しい html を挿入する必要があります。どうすればいいですか？insertBefore または insertAfter は役に立ちません (afaik)。なぜなら、それらは要素を挿入するためのものであり、解析されていない HTML ではないからです。では、ヘッダーの行のオブジェクトを持っている場合、その後 (または前) に別の行を (HTML で) 挿入するにはどうすればよいでしょうか?

あなたのアイデアをありがとう

4

4 に答える 4

1

jQuery.after()を使用します。

jQueryはこの種の素晴らしいライブラリなので、一般的にはjQueryに慣れてください。

于 2010-05-06T16:11:15.280 に答える
0

サーバー側でどの程度制御できますか? 制御できる場合は、サーバー側から HTML を返すのではなく、テーブルのデータを返すことをお勧めします。

その後、JQuery または MooTools を自由に使用して、HTML ではなく DOM 構造をテーブルに動的に挿入できます。

于 2010-05-06T16:11:49.197 に答える
0

アプローチを再考することを検討します。 innerHTMLInternet Explorer のテーブルでは読み取り専用であるため、現在の方法では相互運用性の問題が発生することになります。を指定する代わりに、DOM を使用して要素を構築するようにコードを再構築できますinnerHTML。これはかなり単純で、はるかに効率的 (パーサーを呼び出さない) で、ブラウザー間の互換性が高くなります。

Mozilla はこれについて Microsoft に同意しているようで、element.innerHTMLドキュメントを引用しています。

[innerHTML] は、テーブル全体またはセルの内容を書き込むために使用できますが、テーブルの一部を書き込むためには使用しないでください。そのためには W3C DOM メソッドを使用する必要があります。

このプロセスには、DOM レベル 2 メソッドの使用が含まれtable.insertRow()ますtr.insertCell()。まともな読み物については、Building Tables Dynamically (MSDN)を参照してください。

例 (MDC から):

function addRow(tableID)
{
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

  // Append a text node to the cell
  var newText  = document.createTextNode('New top row')
  newCell.appendChild(newText);
}
于 2010-05-06T16:31:33.217 に答える
0

新しい HTML 要素が単なる文字列である場合、コードは正しく、問題はありません。ただし、HTML 要素に HTML DOM 要素 (特に入力、テキストエリアなどのフォームの一部) が含まれている場合は、document.createElement() メソッドを使用する必要があります。プロトタイプとscriptaculousを使用する場合は、Builder.node() を試してください。

/* using native DOM */
//create new row
var new_row = document.createElement('tr');
//create new column
var new_column = document.createElement('td');
//add a text to column or cell
new_column.innerHTML = 'my new string';
new_row.appendChild(new_column);
tableelement.insertBefore(new_row, tableelement.firstChild);

/* using prototype & script.aculo.us */
var new_cell = Builder.node('tr', [
    Builder.node('td', 'my new string')
]);
new Insertion.Top(tableelement, new_cell);
于 2010-07-28T22:02:02.587 に答える