jQueryでテーブルの行と列を追加と削除するサンプル

下の画像は、テーブルの行と列を追加と削除する表示例です。

テーブルに行と列を追加するとき、それぞれにinputタグも一緒に追加していくサンプルコードです。inputは、一列目と一行目にテキスト入力ができ、それ以外は数字を入力できるよう挿入されます。

動かすときは、scriptタグに下のコードを書きます。

$(function() {
	//行追加
	$('#rowAdd').on('click', function() {
		$('table').append('<tr>' +  + '</tr>');
		for( var i = 0; i < $('table tr:first td').length; i++) {
			if( i != 0 ) {
				$('table tr:last').append('<td><input type="number" name="data_value' + (i + 1) + '" /></td>');
			} else {
				$('table tr:last').append('<td><input type="text" name="data_value' + (i + 1) + '" /></td>');
			}
		}
	});

	//行削除
	$('#rowRemove').on('click', function() {
		if( $('table tr').length > 3) {
			$('table tr:last').remove();
		}
	});

		//列追加
	$('#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>');
			} 
		});
	});

	//列削除
	$('#colRemove').on('click', function() {
		if($('table tr:first td').length > 2) {
			$('table tr').each(function() {
				$(this).children(':last').remove();
			});
		}
	});

});

最初に表示されるテーブルが下のコードです。使用するときは、bodyの中に書きます。

<input type="button" id="colAdd" value="列追加" />
<input type="button" id="colRemove" value="列削除" />
<input type="button" id="rowAdd" value="行追加" />
<input type="button" id="rowRemove" value="行削除" />
<br /><br />

<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>