テーブル形式のテキストに値を入力して、jQueryで中の値を取得する

テーブルにテキストボックスを配置する

テーブル形式で値を取得するには、まずテーブルを用意して、そのtdにinput type=”text”のボックスを埋め込んでいく。
イメージはこんな感じ。

HTMLはこうなる。

<body>
<h2>テーブルっぽい箱に値を入力して、それを取得する</h2>
<table class="memberTable" id="memberTable" >
<tr><th>メンバーID</th><th>名前</th><th>年齢</th><th>性別</th></tr>
<!-- 1列目 -->
<tr>
<td><input type="text" size="5" maxlength="10" name="memberId" value="" class="memberList"></td>
<td><input type="text" size="30" maxlength="30" name="name" value="" class="memberList"></td>
<td><input type="text" size="5" maxlength="10" name="age" value="" class="memberList"></td>
<td>
<select>
<option></option>
<option></option>
</select>
</td>
</tr>
<!-- 2列目 -->
<tr>
<td><input type="text" size="5" maxlength="10" name="memberId" value="" class="memberList"></td>
<td><input type="text" size="30" maxlength="30" name="name" value="" class="memberList"></td>
<td><input type="text" size="5" maxlength="10" name="age" value="" class="memberList"></td>
<td>
<select>
<option></option>
<option></option>
</select>
</td>
</tr>
<!-- 3列目 -->
<tr>
<td><input type="text" size="5" maxlength="10" name="memberId" value="" class="memberList"></td>
<td><input type="text" size="30" maxlength="30" name="name" value="" class="memberList"></td>
<td><input type="text" size="5" maxlength="10" name="age" value="" class="memberList"></td>
<td>
<select>
<option></option>
<option></option>
</select>
</td>
</tr>
</table>
<input type="button" id="testButton"  value="クリック!">
<div id="result"></div>
</body>

テーブルとその間のテキストボックスにCSSを適用する。

上記のHTMLだけだと、なんだか間抜けなテキストボックスが並ぶだけになってしまうので、CSSを設定する。

body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
table.memberTable {
border-collapse: collapse;
}
table.memberTable th,
table.memberTable td {
padding: 0;
border: solid 1px #000;
}
input.memberList {
/**padding: 0px 0px 0px 0px; */
/**margin: 0px 0px 0px 0px; */
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

このCSSを適用することで、最初のイメージのようにぴっちり隙間の無いテーブル形式の箱ができる。

テーブルに入力した値を取得するjQueryコード

それでは、テーブル内のテキストに値を入れて、その値をJavaScript(jQuery)で取得してみる。
JavaScriptで取得できれば、あとはその値をAjaxでサーバに送るなり、加工してチェックするなり、色々と好きにできる。

<script type="text/javascript">
$(function() {
$("#testButton").click(function() {
var memberList = [];
var memberObj = {
memberId :null,
name : null,
age : null,
gender : null
};
var tr = $("table tr");
for (var i=0,len=tr.length; i < len; i++) {
var row = tr.eq(i).children();
//テーブルのヘッダーは読み飛ばす
if (row.is("th")) {
continue;
}
var rowObj = Object.create(memberObj);
for (var j=0, m=row.length; j < m; j++) {
var tds = row.eq(j).children();
if ("memberId" == $(tds).attr("name")) {
rowObj.memberId = $(tds).val();
} else if("name" == $(tds).attr("name")) {
rowObj.name = $(tds).val();
} else if("age" == $(tds).attr("name")) {
rowObj.age = $(tds).val();
} else if("gender" == $(tds).attr("name")) {
rowObj.gender = $(tds).val();
}
}
memberList.push(rowObj);
}
console.log(memberList);
});
});
</script>

ボタンをクリックすると、値を取得するjQueryが動く。
Chromeのコンソールには以下のように表示される。ちゃんとそれぞれのメンバーのオブジェクトが配列に格納されていることがわかる。

0: Object
age: "28"
memberId: "1"
name: "sho322"
__proto__: Object
1: Object
age: "35"
memberId: "2"
name: "勝田義明"
__proto__: Object
2: Object
age: "21"
memberId: "3"
name: "山下太一"
__proto__: Object
length: 3
__proto__: Array[0]