データを表形式で表示する為に table タグを用いますが、 table の中の1個のセルデータを取得するには少し順を追って処理する必要があります。 以下の様に各タグを順番に指定することになります。
tableタグ ⇒ trタグ ⇒ tdタグ内のテキストの取得
trタグ も tdタグもそれぞれ複数の連続した要素から成り立っていますので、 何番目の要素であるかを指示することが必要になります。 そこで使用するのが eq() メソッドです。 先ずは eq() メソッドの説明から行い、その後で table の処理の説明をします。
■このページの内容
■eq() メソッドの使い方
table の操作と言っておきながら例として li タグを取り上げていますが、 li タグの方が見た感じが簡単なので直感的に分かるかと思います。
以下のソースを見て下さい。 li タグで5個のデータを表示しています。 「id="btn1"」のボタンクリックイベントの関数の中で eq() メソッドを使って li タグの2番目の要素を取得しています。 eq() メソッドの引数は要素のインデックスを指定しますが、インデックスの先頭は 0（ゼロ） から始まるので 2番目の場合は eq(1) と指定します。
「id="btn2"」のボタンクリックイベントでは更に処理を発展させて li タグの全ての要素を取得しています。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>北海道</li>
<li>本州</li>
<li>四国</li>
<li>九州</li>
<li>沖縄</li>
</ul>
<button id="btn1">2番目の要素を取得</button><br />
<button id="btn2">全ての要素を取得</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//<li>の2番目の要素を取得
var str = $("li").eq(1).text();
alert(str);
});
//<button id="btn2">のクリックイベントの関数を宣言
$("#btn2").click(function(){
//<li>の全ての要素を取得
var str = '';
for (var i = 0; i < $("li").length; i++) {
str += $("li").eq(i).text() + "\n";
}
alert(str);
});
});
</script>
</body>
■eq() メソッドの使って li タグの中身を変更
li タグの中身を変更するにはソースを以下の様に記述します。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>北海道</li>
<li>本州</li>
<li>四国</li>
<li>九州</li>
<li>沖縄</li>
</ul>
<button id="btn1">全ての要素を変更</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//<li>の全ての要素を変更
for (var i = 0; i < $("li").length; i++) {
//取得文字列に"."追加
var str = $("li").eq(i).text() + ".";
//要素を変更
$("li").eq(i).text(str);
}
});
});
</script>
</body>
■簡単な table の要素の取得
それではいよいよ table の要素の取得を行います。 データ表としては見出し部分を含めて4行4列の簡単なものですが、 以下の table の中から3行目の「みかん」の単価の値を取得しています。
最初のボタン「id="btn1"」では、最初のセレクタ宣言から始まり、単価の部分まで"."（ドット）でオブジェクトを繋いで 一気にセルのテキストを取得しています。
ここで $("table").children().children() の部分で .children() が1回余計ではないかと思われるかもしれませんが、 これでOKなのです。 この table には実は tbody タグが省略されているからです。そのため tr の所にたどり着くまでに tbody を介しているからです。
次のボタン「id="btn2"」ではこの辺りを1個ずつのオブジェクトに階層を順次深めて処理を行っています。
ただ、セレクタの部分で一気に tr のところまで指示してやれば $("table").children().children() の部分を $("table tr") で置き換えられます。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq3</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<th>品名</th>
<th>数量</th>
<th>単価</th>
<th>金額</th>
</tr>
<tr>
<td>りんご</td>
<td>2</td>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>みかん</td>
<td>5</td>
<td>50</td>
<td>250</td>
</tr>
<tr>
<td>いちご</td>
<td>3</td>
<td>250</td>
<td>750</td>
</tr>
</table>
<button id="btn1">みかんの行の単価を取得</button>
<button id="btn2">みかんの行の単価を取得その２</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//「みかんの」の単価を取得
var str = $("table").children().children().eq(2).children().eq(3).text();
alert(str);
//より簡単な方法
var str = $("table tr").eq(2).children().eq(3).text();
alert(str);
});
//<button id="btn2">のクリックイベントの関数を宣言
$("#btn2").click(function(){
//オブジェクトの連結を分解
var objTable = $("table"); //<table> オブジェクト
var objTbody = objTable.children(); //<tbody> オブジェクト
var objTrarr = objTbody.children(); //<tr> 配列オブジェクト
var objTr = objTrarr.eq(2); //<trの3番目> オブジェクト
var objTdarr = objTr.children(); //<td> 配列オブジェクト
var str = objTdarr.eq(3).text(); //<tdの4番目> オブジェクト
alert(str);
});
});
</script>
</body>
■簡単な table の要素の取得２（ thead tbody を記述）
上記の table に正式な感じにする為 thead tbody のタグを記述して、 table の要素の取得を行います。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq4</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>品名</th>
<th>数量</th>
<th>単価</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>2</td>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>みかん</td>
<td>5</td>
<td>50</td>
<td>250</td>
</tr>
<tr>
<td>いちご</td>
<td>3</td>
<td>250</td>
<td>750</td>
</tr>
</tbody>
</table>
<button id="btn1">みかんの行の単価を取得</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//「みかんの」の単価を取得(index = 1:2番目)
var str = $("table tbody tr").eq(1).children().eq(3).text();
alert(str);
});
});
</script>
</body>
セレクタの中で一気に table ⇒ tbody ⇒ tr とオブジェクト参照を進め、tr の中の2番目のIndexを参照しています。 今回の table はヘッダとボディに分けましたので「みかん」の行は2番目のIndexになります。 その後は今までと同様にしてセルのテキストを取得します。
これで table からのデータ取得は一先ず終わりにしたいと思います。 今後は table への行追加、行削除へと移っていきます。
コメント