忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

  • 2020/03/07
JavaScript jQueryで table の操作する方法その１・データ取得

データを表形式で表示する為に table タグを用いますが、 table の中の1個のセルデータを取得するには少し順を追って処理する必要があります。 以下の様に各タグを順番に指定することになります。

　tableタグ ⇒ trタグ ⇒ tdタグ内のテキストの取得

trタグ も tdタグもそれぞれ複数の連続した要素から成り立っていますので、 何番目の要素であるかを指示することが必要になります。 そこで使用するのが eq() メソッドです。 先ずは eq() メソッドの説明から行い、その後で table の処理の説明をします。

■このページの内容


JavaScript コードレシピ集

JavaScriptによるWeb開発のための、究極のレシピ集。 制作の現場で使われる定番テクニックからプロ技まで集めたそうです。


■eq() メソッドの使い方

table の操作と言っておきながら例として li タグを取り上げていますが、 li タグの方が見た感じが簡単なので直感的に分かるかと思います。

以下のソースを見て下さい。 li タグで5個のデータを表示しています。 「id="btn1"」のボタンクリックイベントの関数の中で eq() メソッドを使って li タグの2番目の要素を取得しています。 eq() メソッドの引数は要素のインデックスを指定しますが、インデックスの先頭は 0（ゼロ） から始まるので 2番目の場合は eq(1) と指定します。

「id="btn2"」のボタンクリックイベントでは更に処理を発展させて li タグの全ての要素を取得しています。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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 タグの中身を変更するにはソースを以下の様に記述します。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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") で置き換えられます。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<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 の要素の取得を行います。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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 への行追加、行削除へと移っていきます。


関連する記事

⇒JavaScript jQueryで table の操作する方法その１・データ取得
⇒JavaScript jQueryで table の操作する方法その２・データ追加
⇒JavaScript jQueryで table の操作する方法その３・データ削除
⇒JavaScript jQueryで table の操作する方法その４・データ行の追加と削除
⇒JavaScript jQueryで table の操作する方法その５・データ取得その２(明細行内からの取得:find())

おすすめ本

share











PR
  • JavaScript
  • 0CM

コメント

コメントを書く