使用Javascript / JQuery检查该行中的复选框时，从HTML表中的特定列获取数据

Question

我有一个包含5列的HTML表。 第一列是一个复选框。 我想在选中该行中的复选框时找到第5列（最后一列）的内容。

HTML：

    <table>
     <tr>
      <th></th>
      <th>A</tr>
      <th>B</tr>
      <th>C</tr>
      <th>D</tr>
     </tr>
     <tr>
      <td><input type='checkbox' class="chk" /></td>
      <td>data for A1</td>
      <td>data for B1</td>
      <td>data for C1</td>
      <td>data for D1</td>
     </tr>
     <tr>
      <td><input type='checkbox' class="chk"/></td>
      <td>data for A2</td>
      <td>data for B2</td>
      <td>data for C2</td>
      <td>data for D2</td>
     </tr>
    </table>

我是javascript的初学者，但尝试过这样做。

** JS：**

    $(document).ready(function(){
      if($('input.chk').is(':checked')){
         var y = $("td:nth-of-type(5)").html();
         alert(y);
         }
      });

此函数仅返回第一行，即选中复选框时，它显示“D1的数据”。 但我想要所有的行。

谢谢你的帮助。 :)

Answer 1

请尝试一次：

$(".chk").on("change", function(){
  var y = $(this).parent().parent().find('td').eq(4).html();
  alert(y);
});//

如果只有选中复选框才要执行此代码，则可以添加:checked condition。

Answer 2

另一种方法是基于使用eq ：

 $(function () { $(':checkbox').on('click', function(e) { if (this.checked == true) { var fifthEle = $(this).parent().siblings().eq(3); $('#logMsg').append('<p>' + fifthEle.text() + '</p>'); } }) }); 

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <table> <tr> <th></th> <th>A <th>B <th>C <th>D </tr> <tr> <td><input type='checkbox' class="chk"/></td> <td>data for A1</td> <td>data for B1</td> <td>data for C1</td> <td>data for D1</td> </tr> <tr> <td><input type='checkbox' class="chk"/></td> <td>data for A2</td> <td>data for B2</td> <td>data for C2</td> <td>data for D2</td> </tr> </table> <div id="logMsg"></div> 

Answer 3

请试试这个

$(document).on('click','input.chk',function(){
    // getting the tds with in the rows in which check exists 
    $tds=$(this).parent().siblings();

    if($(this).is(':checked'))
    {
      $data=$($tds[$tds.length-1]).text();
      alert($data);
    }

  })