jQueryでテーブルに列を追加する例

jQuery・JS

テーブルに列を追加するには、$(‘table tr’)でtrを取得して、eachを使って(挙動は大丈夫だとおもうけれど違う方が良いのか)子要素にtdを追加していくことで列を追加できます。

$('table tr').each(function() {
	$(this).append('<td></td>');
});

下の例では、if文を使い列の一番最初とそれ以外で追加する要素を若干変更していて、name属性は列ごとに名前を付けるため列の長さ(変数cell)を利用しています。

$(function() {
	$('#colAdd').on('click', function() {
		var cell = $('table tr:first td').length;

		$('table tr').each(function(i) {
			if(i != 0) { 
				$(this).append('<td><input type="number" name="data_value'+ (cell + 1) +'" /></td>');
			} else {
				$(this).append('<td><input type="text" name="data_value'+ (cell + 1) +'" /></td>');
			} 
		});
	});
});

テーブルのサンプル

<table>
<tr>
<td><input type="text" name="data_value1" /></td>
<td><input type="text" name="data_value2" /></td>
</tr>
<tr>
<td><input type="text" name="data_value1" /></td>
<td><input type="number" name="data_value2" /></td>
</tr>
<tr>
<td><input type="text" name="data_value1" /></td>
<td><input type="number" name="data_value2" /></td>
</tr>
</table>

<input type="button" id="colAdd" value="列追加" />
スポンサーリンク

コメント

タイトルとURLをコピーしました