[jQuery] テーブルで選択した行の td の値を取得

2019-08-092019-12-07JavaScriptjQuery

jQuery でボタンと同じ行にある td の input 要素の値を取得する方法

テーブルの各行にある「コレを選択」というボタンをクリックしたら、その行にある「商品名」の値を取得する。

DEMO  「コレを選択」というボタンをクリックすると、「 name1 」、「 name2 」、「 name3 」に商品名がセットされる。

See the Pen getting parent / child elements on table by AgoPeanuts (@AgoPeanuts) on CodePen.

サンプルテーブル

<table id="sampleTable" border="1">
    <thead>
      <tr><th>番号</th><th>商品名</th><th>値段</th><th>ボタン</th></tr>
    <thead>
    <tbody>
      <tr>
        <td>2345</td>
        <td><input type="text" name="name" value="快眠王"></td>
        <td>30</td>
        <td><button type="button" class="selectBtn">コレを選択</button></td>
      </tr>
      <tr>
        <td>1268</td>
        <td><input type="text" name="name" value="お肌キレイ"></td>
        <td>20</td>
        <td><button type="button" class="selectBtn">コレを選択</button></td>
      </tr>
      <tr>
        <td>3259</td>
        <td><input type="text" name="name" value="足くつろぎキット"></td>
        <td>100</td>
        <td><button type="button" class="selectBtn">コレを選択</button></td>
      </tr>
      <tr>
        <td>3524</td>
        <td><input type="text" name="name" value="お肌スベスベ"></td>
        <td>99</td>
        <td><button type="button" class="selectBtn"">コレを選択</button></td>
      </tr>
      <tr>
        <td>1074</td>
        <td><input type="text" name="name" value="快腸です！"></td>
        <td>9</td>
        <td><button type="button" class="selectBtn">コレを選択</button></td>
      </tr>
    </tbody>
  </table>

jQuery

// 「コレを選択」ボタンをクリックしたら
$(".selectBtn").on("click", function(){
    var name1 = $(this).closest('tr').find('input').val();
    var name2 = $(this).closest('tr').find('input[name=name]').val();
    var name3 = $(this).closest('tr').children("td").children('input').val();
});

コレらはどれも同じ値（商品名）を取得する。例えば、 1 行目のボタンをクリックしたら、「快眠王」が取得される。

$(this) にはボタン要素の情報が入っていて、 closest('tr') を使ってボタンから一番近い tr を取得。
そこからは、子要素や子孫要素を取得するメソッドを使って、 input 要素を取得。 input なので、 val() メソッドを使って値を取得する。

td の中にある input 要素は、 tr からすると孫要素にあるため find メソッドを使う。
同一行内に input 要素が 2 つ以上ある場合は、 name とか class 名をメソッドの引数に指定する。

td の中に input 要素が入っている場合は、 input は td の子要素になる。

ちなみに、 input 要素ではなく、td の中にあるテキストの値を取得したい場合

var no1 = $(this).closest('tr').children("td")[0].innerText;
var no2 = $(this).closest('tr').children("td").first().text();

children("td")[0] の後に、text() を繋げるとエラーになった。この場合は、 innerText を使うらしい。