JavaScriptで増減するInputデータを取得して配列に入れる例

テーブルタグを使用してinputを整列した下の画像にあるような入力欄で、そのデータを取得して配列に入れるJavaScriptとjQueryを使用したコードについて。

下の画像は、inputに入力されたデータを行ごとに配列にしてデータを格納したイメージです。

下のコードは、inputタグを設定しています。それをテーブルを使いname属性ごとにに縦に整えています。

<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="text" name="data_value2" /></td>
	</tr>
	<tr>
		<td><input type="text" name="data_value1" /></td>
		<td><input type="text" name="data_value2" /></td>
	</tr>
</table>

上にあるinputにデータを入力。そのデータを取得して行ごとに配列にしていくコードが下になります。配列に格納する方法には、色々な方法があると思いますが一例です。

テーブルで行や列を追加してinput（name=”data_value数字”）も同じように追加しても行ごとに入力データを配列にしていくことができます。

var data_prop = [];
var cell = $('table tr:first-child td' ).length; //列の長さ
var rows = $('table tr').length; //行の数

//行ごとの値を配列にする
for(var i = 0; i < rows; i++) {
	var input_array = [];
	for(var j = 1; j <= cell; j++) { 
		input_array.push($('[name=data_value' + j +']')[i].value);
	}
	data_prop.push(input_array.concat());
}