td 上的 HTML prev 函数返回 null 或空答案

【问题标题】：HTML prev function on td is returning null or emptytd 上的 HTML prev 函数返回 null 或空
【发布时间】：2022-12-09 23:11:18
【问题描述】：

在最后一列的 <table>with 复选框中，选择我想要对前两个 <td> 的值求和的 whcih。 js 函数应该对 CheckBox 为 ticked 的列的值求和。但我一直在定位之前的 <td> 本身。片段如下。

function doSumAeFunction(){
          var prevCell = $(this).closest('tr').prev('td').text();
           console.log(prevCell);
           alert(prevCell);
       }

table {
  table-layout: fixed;
  width: auto;
  border-collapse: collapse;
  border: 3px solid purple;
}

table,
th,
td {
  border: 1px solid;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
  <thead>
    <th>Sl No</th>
    <th>English</th>
    <th>Geography</th>
    <th>Maths</th>
    <th>Science 2</th>
    <th align="center">Select</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>22</td>
      <td>15</td>
      <td>12</td>
      <td>15</td>
      <td><input type="checkbox" value="checked" onclick="doSumAeFunction()"  /></td>
    </tr>
    <tr>
      <td>1</td>
      <td>8</td>
      <td>7</td>
      <td>10</td>
      <td>5</td>
         <td><input type="checkbox" value="checked" onclick="doSumAeFunction()"  />
    </tr>
  </tbody>
</table>
<br />

<div>
  <div>Sum of Marks</div>
  <div id="sum_of_maths">Sum of Maths is: </div>
  <div id="sum_of_science">Sum of Science is: </div>
</div>

【问题讨论】：

它是 prev() 而不是 prev 并且 $('checkbox') 不会选择任何东西，因为没有复选框元素。这是一个输入
是的，先生，修改了 sn-p 中的错误，现在调用一个函数但仍然无法正常工作。
嗯，它在你上面的例子中不起作用，因为你没有包含 jQuery 并且 $(this) 现在没有意义

标签： javascript html jquery bootstrap-4 html-table

【解决方案1】：

要获取复选框前单元格中的值，请使用 $(this).parent().prev('td').text()：

$('input[type="checkbox"]').change(function() {
  var prevCell = $(this).parent().prev('td').text();
  console.log(prevCell);
})

table {
  table-layout: fixed;
  width: auto;
  border-collapse: collapse;
  border: 3px solid purple;
}

table,
th,
td {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
  <thead>
    <th>Sl No</th>
    <th>English</th>
    <th>Geography</th>
    <th>Maths</th>
    <th>Science 2</th>
    <th align="center">Select</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>22</td>
      <td>15</td>
      <td>12</td>
      <td>15</td>
      <td><input type="checkbox" value="checked" /></td>
    </tr>
    <tr>
      <td>1</td>
      <td>8</td>
      <td>7</td>
      <td>10</td>
      <td>5</td>
      <td><input type="checkbox" value="checked" />
    </tr>
  </tbody>
</table>
<br />

<div>
  <div>Sum of Marks</div>
  <div id="sum_of_maths">Sum of Maths is: </div>
  <div id="sum_of_science">Sum of Science is: </div>
</div>

【讨论】：