jQuery でテーブルを作成する
Anika Tabassum Era
2023年1月30日
2022年8月18日
jQuery ライブラリを使用して、コンテンツに新しいテーブル行を追加し、テーブル要素を作成できます。データまたは出力パターンがテーブル形式でスタックされていることを確認するために、基本的なループ作業に進みます。
2つの例を検討します。1つはテーブルタグとコンテンツを文字列として受け取ります。後で追加すると、HTML 本文のテーブルとして構成されます。
ただし、テーブル要素を文字列として作成すると、後のカスタマイズが妨げられる可能性があります。したがって、2 番目の例では、テーブル要素のインスタンスを作成します。したがって、属性（id、class）を指定することで、テーブルの内容のプロパティを変更できます。
理解するために徹底的なチェックをしましょう。
テーブルの内容を文字列として取得し、jQuery を使用してテーブルを作成する
ここでは、テーブル要素の開始タグを格納し、コンテンツを追加し、終了タグを追加する変数を取得します。次のステップでは、この合計または文字列のコレクションを、検討した div に追加します。
基本的な問題は、テーブルデータまたはテーブル行のプロパティを再初期化できないことです。コード行を確認してみましょう。
コードスニペット：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var content = "<table>"
for(i=0; i<3; i++){
content += '<tr><td>' + 'output ' + i + '</td></tr>';
}
content += "</table>"
$('#tab').append(content);
</script>
出力：
jQuery でテーブルインスタンスを作成してテーブルを作成する
テーブルのインスタンスをその id および class 属性とともに作成することを検討します。後で、好みに基づいて、プロパティを変更できます。
コードフェンスはこれをより明確に説明しています。
コードスニペット：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var table = $('<table>');
for(i=0; i<3; i++){
var row = $('<tr>').text('output ' + i).addClass('rows');
row.addClass('rows').css({'color':'red'});
table.append(row);
}
$('#tab').append(table);
</script>
出力：
Author: Anika Tabassum Era
