テーブル形式のテキストに値を入力して、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,'ＭＳ Ｐゴシック',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,'ＭＳ Ｐゴシック',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]

お金があるかないかで人生の楽しさは全く変わってきます。

お金があっても幸せになれるとは限りませんが、お金がない人生は不幸です。

お金がなかった私が、転職して年収1000万を超えるまでにお世話になったブログを紹介します。

エンジニア転職のリアル

今の時代は、お金を稼げるかどうかは能力の有無よりも触れた情報の質によるものが大きいです。
ぜひ皆さんも良質な情報に触れて、お金持ちになって人生を充実させてください。