2

ボタンのクリック時にテーブルにテキスト ボックスを作成しようとしています。ボタンクリックでJavaScriptコードを書きましたが、動作します。私の問題は、テキストボックスの次の行を追加すると、前の行のテキストボックスに入力されたデータがクリアされることです。コードとスクリーンショットが表示されます。この問題を解決するのを手伝ってください。

function addRow(tableID) {
   var table = document.getElementById(tableID);
   var count = table.rows.length - 1;
   table.innerHTML += "<tr> <td>"+count+"</td> <td><input type='text' id='date" + count + "' size='20'></td> <td><input type='text' id='from" + count + "' size='20'></td> <td><input type='text' id='to" + count + "' size='20'></td> <td><input type='text' id='mode" + count + "' size='20'></td> </tr>";
}

追加ボタンをクリックすると、Sl.no1 に対応するデータが失われます]

4

1 に答える 1

4

innerHTMLあなたのシナリオに沿った方法ではありません。Javascript が提供する メソッドinsertRowとメソッドを実際に使用する必要があります。insertCellはるかにクリーンで、保守しやすく、読みやすいですか。innerHTMLあなたの問題である要素の内容を上書きします。使用した場合.innerHTML += "something"は機能する可能性がありますが、呼び出されるたびにテーブルを構築することはできませんaddRow.HTMLを介して文字通り新しい行を追加するだけです.

https://developer.mozilla.org/en-US/docs/DOM/table.insertRow

https://developer.mozilla.org/en-US/docs/DOM/tableRow.insertCell

addRowこのように、関数が呼び出されるたびにテーブルを完全に構築する必要はありません。insertRow内部にテキストボックスがある新しいものを使用して追加するだけです。以前の行が上書きされたり、再作成されたり、台無しになったりすることはありません (正しく行う限り)。リンクに例がありますが、数分でコードの例を投稿します。

アップデート：

http://jsfiddle.net/MJ2md/

私が何を意味するかを示すために。あまりきれいではないかもしれませんが、すぐに書きたかっただけです。

于 2012-10-05T04:58:32.467 に答える