52361

[code]

      <table id="tbl1">
        <thead>
          <tr><th>列１</th><th>列２</th></tr>
        </thead>
        <tbody>
          <tr><td>A1</td><td>A2</td></tr>
          <tr><td>B1</td><td>B2</td></tr>
          <tr><td>C1</td><td>C2</td></tr>
        </tbody>
        <input type="submit" value=" ボタン"/>
      </table>
    </body>
    </html>
    
[/code]

事前にJS側で、let tmp = 2; と定義したものを使って  
B2を取得したい場合JSのコードはどのように描けばよろしいでしょうか？


CC BY-SA 4.0
2019-01-27T13:34:37.680
52355
2019-01-28T01:46:30.700
2019-01-27T13:40:09.060
25422
25422
question
javascript jquery
テーブルから指定した行の値を取得したい


`tr`のchildrenに対して`eq`を呼び出すことで行の値を取得できます。  
下記のサンプルコードでは、`id=tbl1`の`tbody`要素から`tr`の2行目の子要素(`td`)の末尾から`text`を取得しています。

[code]

    let tmp = 2;
    let text = $("#tbl1").children("tbody").children("tr").eq(tmp - 1).children().last().text();
    
[/code]

`eq`のインデックスは0から始まるので、"B2"を取得する場合は`eq(1)`を指定する点に注意が必要です。  
なおご覧の通りコードが冗長になるので、下記のサンプルコードのように`id`や`name`を`td`に指定して直接参照する方が可読性は高まります。

[code]

    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script>
          function sampleSubmit() {
              let tmp = $("#sel1").val();
              //let text = $("#tbl1").children("tbody").children("tr").eq(tmp - 1).children().last().text();
              let text = $("#td" + tmp).text();
              $('#sampleOutput')[0].innerText = text;
          }
      </script>
    </head>
    <body>
      <form>
        <select id="sel1">
          <option value="1"/>A1</option>
          <option value="2"/>B1</option>
          <option value="3"/>C1</option>
        </select>
        <input id="aaa" type="button" value=" ボタン" onClick="sampleSubmit()"/>
      </form>
      <table id="tbl1">
        <thead>
          <tr><th>列１</th><th>列２</th></tr>
        </thead>
        <tbody>
          <tr><td>A1</td><td id="td1">A2</td></tr>
          <tr><td>B1</td><td id="td2">B2</td></tr>
          <tr><td>C1</td><td id="td3">C2</td></tr>
        </tbody>
      </table>
      <span id="sampleOutput"></span>
    </body>
    </html>
    
[/code]

[SOの類似質問](https://ja.stackoverflow.com/q/46943)  
[別サイトの類似質問](https://teratail.com/questions/71867)


CC BY-SA 4.0
2019-01-28T01:46:30.700
52361
2019-01-28T01:46:30.700
9820
52355
answer