jQueryでforループを使用してテーブルに動的に行を追加する

htmlファイルでjQuery 1.3.2を使用して動的表を作成したいとします。このために、最初の行を作成してから、10回実行するforループを作成し、各反復で、表の最後の行を選択し、after()を使用して新しい行を追加します。この新しい行には、forループのカウンタの値が格納されます。jQueryでforループを使用してテーブルに動的に行を追加する

コード：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Document</title> 
<script type="text/javascript" src="../jquery-1.3.2.js"></script> 
<script type="text/javascript"> 

    $("document").ready(function() { 
     for (var i = 0; i < 11; i += 1) { 
      var newItem = $("<tr><td>"i"</td></tr>"); 
      $("#table1 tr:last").after(newItem.html()); 
     } 
    }); 

</script> 

</head> 
<body> 
<table id="table1"> 
    <tr> 
    <td>row 1 col 1</td> 
    </tr> 
</table> 
</body> 
</html>

問題が<table></table>で作成された最初の行のみが表示されます。助けてください。

出典

2012-02-04 Akash

は、この方法を試してみてください：

var newItem = "<tr><td>" + i + "</td></tr>"; 
$("#table1 tr:last").after(newItem);

出典

2012-02-04 06:21:31 dfsq

$("#table1 tr:last")

は、最後の行を選択します。

$("#table1")

と比較して、必要な処理の面で少し高価です。テーブル全体が選択されるだけです。

$("#table1 tr:last").after(...)

あなたが最後の行を選択した後、あなたが戻って一歩を取り、バックTRの親に取得しているため、再び高価です：最後に何かを追加してみてください。

テーブルの行をこのようなテーブルの子として追加してみませんか？

var row = $("<tr><td>"i"</td></tr>"); 
$("#table1").append(row);

Appendは常にtable1の子の最後に追加されます。これは速くなければなりません。 jQueryのドキュメントでappendを見てください。ここで

出典

2012-02-04 06:36:36

thnks .... thts右 – Akash

for (var i = 0; i < 11; i += 1) { 
    $("#table1").append("<tr><td>" + i + "</td></tr>"); 
}

は、それが働いた... my code

出典

2012-02-04 07:05:30 InspiredJW

のthnxです – Akash

jQueryでforループを使用してテーブルに動的に行を追加する

答えて

関連する問題