テーブルのカラムを追加したい
テーブルの入力項目をどんどん増やしたい。
増やすとすると、その入力項目のテンプレートが必要。
テンプレートに合わせて、テーブルの列を増やしていくスクリプトを書きたい。
ボタンを押すと増やすプログラム
// 非表示にしておいたテンプレートを元に、要素を追加して表示する
function addTableTr(target_tbody_selector, target_template_selector) {
$(target_tbody_selector).append($(target_template_selector).html());
}
<table>
<thead>
<th>名前</th>
<th>色</th>
</thead>
<tbody id="t-body">
</tbody>
<tbody class="hidden" id="t-template">
<td><input type="text"></td>
<td><input type="text"></td>
</tbody>
</table>
<button type="button" onclick="addTableTr('#t-body', '#t-template')">列を増やす</button>
- テンプレートを非表示で用意する
- 増やすターゲットとテンプレートのidを指定する
- テンプレート内のhtmlを、ターゲットに加える
という仕組み。
テンプレートの中身を帰れるので、用途に合わせて変えていただくと、良いと思います。
