2

jqueryを使用して、テーブルに列と行を動的に追加しています。

私が抱えている問題は、次のようなコードで行を追加していることです。

        $('#colorgrid').append("<tr id='Row2' class='input-row'><td><input type='text' name='shade' placeholder='shade'/></td><td ><input type='checkbox' name='asdf'/></td><td ><input type='checkbox' name='shade'/></td><td ><input type='checkbox' name='color'/></td></tr>")

したがって、1つの列を追加してから1つの行を追加した後、チェックボックスがありません。以下のスクリーンショットを参照してください。

name理想的には、新しい行が追加されるたびに、チェックボックスでいくつもの列を埋め、チェックボックスの属性を列名で埋めたいと思います。

質問

本当に動的で、行の内容をハードコーディングしないように、新しい行を追加するにはどうすればよいですか。すべての列にチェックボックスを入力し、列ヘッダーに対応する名前を付ける必要があります。

ここに画像の説明を入力してください

4

2 に答える 2

2

Andy's answer はよりクリーンで、その中の要素を変更しながらそれを行うことができます。ただし、「コピーされているが異なる」というケースが少なく、「特定の部分がコピーされた新しい行」が多い場合は、このフォークが役立つ可能性があります。

ここでの手法では、新しい行を作成し、jQuery の each メソッド#Row1 th:not(.space)(テーブル内で選択するようにここで指定されている、つまり「#Row1ないヘッダー.space」) を使用して目的のテーブル ヘッダーのそれぞれを反復処理し、 jQuery のトリムを使用して内部を取得します。余分な空白 (改行、インデント) のないテキストを作成し、新しいセルを追加して、その値をそれぞれの名前として入力します。

于 2013-02-20T17:06:14.553 に答える
2

JQuery の Clone 関数を調べる必要があります。追加する要素を実際にハードコーディングすることなく、最後の行または最初の行を複製できます。これにより、新しい列を含むすべての要素がコピーされます。

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$('.hello').clone().appendTo('.container');

これは生成する必要があります

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
  <div class="hello">Hello</div>
</div>

. . _ name_ id_ jQuery を使用することもできます。各要素を見つけるには:valueappendToinput

newRow.find('input').each(function () {
    var $inputElem = $(this);
    $inputElem.attr('id', 'newId'); //change this to something more dynamic
    $inputElem.attr('name', 'newName'); //change this to something more dynamic
}
于 2013-02-20T16:56:20.763 に答える