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

Posted 2023-05-08

【中文标题】当使用 Javascript/JQuery 选中该行中的复选框时，从 HTML 表中的特定列获取数据

【英文标题】：Getting data from a specific column in a HTML table when a checkbox in that row is checked using Javascript/JQuery

【发布时间】：2016-08-24 09:25:00

【问题描述】：

我有一个包含 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 的数据”。但我希望所有行都使用它。

感谢您的帮助。 :)

【问题讨论】：

***.com/questions/5430254/…

【参考方案1】：

请试试这个

$(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);
    

  )

【参考方案2】：

请尝试一次：

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

如果您希望仅在选中复选框时执行此代码，则可以添加:checked 条件。

【参考方案3】：

另一种方法基于使用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>