HTMLテーブルに動的に行を追加することは、特にインタラクティブなユーザーインターフェースを構築する際に、Web開発において頻繁に求められる要件です。このチュートリアルでは、jQueryとプレーンなJavaScriptの両方を使用してこれを実現するための効率的な方法を示し、プロジェクトに最適なアプローチを選択できるようにします。
目次
jQueryのappend()とprepend()を使ったテーブル行の追加
jQueryはDOMを操作するための簡潔で効率的な方法を提供します。そのappend()とprepend()メソッドは、テーブル構造とシームレスに統合されます。
サンプルのHTMLテーブルを考えてみましょう。
<table id="myTable">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<tr>
</thead>
<tbody>
<!-- 行はここに追加されます -->
</tbody>
</table>
jQueryを使用して新しい行を追加するには:
// テーブルボディを取得
let $tableBody = $('#myTable tbody');
// 新しい行を作成
let $newRow = $('<tr>');
// セルを作成して追加
$newRow.append('<td>新しい名前</td>');
$newRow.append('<td>30</td>');
// 行をテーブルボディに追加
$tableBody.append($newRow);
このコードスニペットは、テーブルボディを選択し、新しい行要素を作成し、データセルを追加し、完成した行をテーブルに追加します。先頭に追加する（先頭に追加する）には、$tableBody.prepend($newRow);を使用するだけです。
より複雑なシナリオや複数の行を追加する場合は、行のHTML文字列を直接構築する方が効率的です。
let newRowHTML = `<tr><td>別の名前</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);
XSS脆弱性を防ぐために、ユーザー提供のデータをサニタイズすることを忘れないでください。
プレーンなJavaScriptを使ったテーブル行の追加
ネイティブJavaScriptアプローチを理解することで、DOM操作についてのより深い理解が得られます。より冗長ですが、外部の依存関係を回避します。
let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');
nameCell.textContent = 'さらに別の名前';
ageCell.textContent = '40';
newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);
このコードは、標準的なJavaScriptメソッドを使用してDOMを直接操作します。プロジェクトのニーズとjQueryに対する習熟度に最適な方法を選択してください。jQueryの例を使用する場合は、jQueryライブラリを含めることを忘れないでください: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>