1

5列で構成されるHTMLテーブルがあります。HTMLテーブルの上には、「HowManyRows」というテキストボックスがあり、ユーザーはテーブルに追加する行数を入力できます。「行の追加」時に実際に行が追加されます。ボタンがクリックされます。

この機能を作成する最善の方法はforループを使用することだと思いましたが、インターネットを閲覧した後、人々はjQueryメソッドを使用すると言われています.each。私はそれを試しましたが、期待どおりに機能しません。「HowManyRows」の数に関係なく、テーブルに1行追加するだけです。誰かが私が間違っていたところを訂正できますか？

これが私のHTMLです：

    <input type="text" id="HowManyRows"/>
    <table id="MainTable">
        <tr id="FirstRow">
            <td>
            <select>
              <option>Milk</option>
              <option>Coffee</option>
              <option>Tea</option>
            </select>
            </td>
             <td>
            <select>
              <option>1 sugar</option>
              <option>2 sugar</option>
              <option>3 sugar</option>
           </select>
            </td>
             <td>
                 <input type="text"/>           
            </td>   
               <td>
                 <input type="text"/>           
            </td>
               <td>
                 <input type="text"/>           
            </td>
        </tr>  
    </table>
<button type="button" id="btnAdd">Add Row!</button>

これが私のjQueryです：

$(document).ready(function () {
    $('#btnAdd').click(function () {
        $('#HowManyRows').each(function(index) {
            $('#FirstRow').clone().appendTo('#MainTable');
        });
    });   
});

ここでJSFiddleのデモを作成しました。

4

5 に答える 5

2

.each()これは通常、jQueryで選択された要素のコレクションを反復処理するために使用されるため、ここでは役に立たないようです。単純なループが機能します：

$('#btnAdd').click(function () {
    var n = parseInt($('#HowManyRows').val(), 10);
    var original = $('#FirstRow');
    for (var i = 0; i < n; i++) {
        original.clone().appendTo('#MainTable');
    }
});
于 2012-05-07T17:10:35.047 に答える
2

他の人が示唆しているように jQuery .clone() メソッドを使用することは、jQuery ドキュメントに従って、この状況では推奨されません。

.clone() を使用すると、重複した id 属性を持つ要素が生成されるという副作用があり、これらは一意であるはずです。可能であれば、この属性を使用して要素を複製したり、代わりにクラス属性を識別子として使用したりしないことをお勧めします。

.appendTo() 呼び出しをループするという提案された方法により、クライアントはすべての反復を再レンダリングすることになることは言うまでもありません。次のことをお勧めします。

行テンプレートである定数を作成します。

var row = ['<tr id="',
           '', // Insert id value here
           '"><td><select><option>Milk</option<option>Coffee</option<option>Tea</option></select></td><td><select><option>1 sugar</option><option>2 sugar</option><option>3 sugar</option></select></td><td><input type="text"/></td><td><input type="text"/></td><td><input type="text"/></td></tr>'];

または、各行が一意の ID を必要としない場合は、行変数の ID を省略して、大きな文字列を 1 つだけ持つこともできます。次に、次のように続けます。

$('#btnAdd').click(function () {
    var i = parseInt($('#HowManyRows').val(), 10);
    var cnt = i;
    var rowCnt = $('#MainTable').children().length;
    var rows = [];
    while(i--) {
        row[1] = 'row' + (rowCnt + cnt - i);
        rows.push(row.join()); // or just row if not using the id
    }
    $('#MainTable').append(rows.join());
}

このように、DOM への追加は 1 回だけで、変数内の空の文字列要素はrow一意で予測可能な ID に置き換えられます。

于 2012-05-07T18:24:37.840 に答える
1

どうぞ：

 $(document).ready(function () {
     $('#btnAdd').click(function () {
            var count = parseInt($('#HowManyRows').val()), first_row = $('#FirstRow');
            while(count-- > 0)
                first_row.clone().appendTo('#MainTable');
     });   
 });​

フィドル： http： //jsfiddle.net/iambriansreed/QWpdr/

于 2012-05-07T17:09:56.917 に答える
0 
$(document).ready(function () {
    var $howMany = $('#HowManyRows'),
        $firstRow = $('#FirstRow');
    $('#btnAdd').click(function () {
        var numRows = parseInt($howMany.val(), 10) || 1; //default to 1
        for (var i = 0; i < numRows; i++){
            $firstRow.clone().appendTo('#MainTable');
        }
    });   
});
于 2012-05-07T17:15:59.513 に答える
0

each呼び出されたjQueryオブジェクトの要素を反復処理するため、次のようになります。

$('#HowManyRows').each(...);

$('#HowManyRows')要素が1つしかないため、1回の反復のみを実行します。

あなたの場合、ループは完全に受け入れられます。

var howMany = parseInt($('#HowManyRows').val(), 10);
while (howMany-- > 0) {
    // Add a row...
}
于 2012-05-07T17:10:47.930 に答える