如何使用jQuery仅修改特定行的<td>值并实现复选框自动勾选？

先给出基础的表格HTML结构（带类名和行标识，方便后续操作）：

<table id="data-table">
  <thead>
    <tr>
      <th>数值输入</th>
      <th>选择状态</th>
    </tr>
  </thead>
  <tbody>
    <tr data-row-id="1">
      <td class="value-col"><input type="number" class="num-input" value="5"></td>
      <td class="checkbox-col"><input type="checkbox" class="row-checkbox"></td>
    </tr>
    <tr data-row-id="2">
      <td class="value-col"><input type="number" class="num-input" value="12"></td>
      <td class="checkbox-col"><input type="checkbox" class="row-checkbox"></td>
    </tr>
    <tr data-row-id="3">
      <td class="value-col"><input type="number" class="num-input" value="8"></td>
      <td class="checkbox-col"><input type="checkbox" class="row-checkbox"></td>
    </tr>
  </tbody>
</table>
<button id="modify-row-btn">修改第3行数值为15</button>

需求1：修改特定行的内容 #

实现思路 #

通过行的唯一标识（如data-row-id属性）定位目标行，再找到该行内的目标元素（文本框或<td>本身），用jQuery的val()或text()方法修改内容。

代码实现 #

// 示例：点击按钮修改data-row-id="3"的行的文本框值
$('#modify-row-btn').click(function() {
  // 定位目标行的文本框
  const targetInput = $('#data-table tr[data-row-id="3"] .num-input');
  // 修改文本框数值
  targetInput.val(15);
  
  // 如果是修改<td>的纯文本内容（而非input值），用下面的代码：
  // $('#data-table tr[data-row-id="3"] .value-col').text('自定义静态文本');
});

需求2：数值大于10时自动勾选复选框 #

实现思路 #

监听所有文本框的input事件（实时响应输入变化），将输入值转为数字类型后判断是否大于10，再通过prop('checked')控制同行复选框的状态。

代码实现 #

// 监听所有数值输入框的输入事件
$('.num-input').on('input', function() {
  // 转成数字类型，避免字符串比较的坑（比如"9" > "10"会误判为true）
  const inputVal = Number($(this).val());
  // 精准定位当前输入框所在行的复选框
  const checkbox = $(this).closest('tr').find('.row-checkbox');
  
  // 根据数值设置复选框状态
  checkbox.prop('checked', inputVal > 10);
});

// 页面加载时自动初始化已有行的复选框状态
$(document).ready(function() {
  $('.num-input').trigger('input');
});

额外说明 #

• 用closest('tr')可以确保只操作当前输入框所在的行，不会影响其他行元素
• 如果不需要数值≤10时取消勾选，去掉else逻辑即可（当前代码会自动双向切换）

内容的提问来源于stack exchange，提问作者randomcode