jQuery实现仅修改触发keyup事件行的总价及删除行问题求助

核心问题分析 #

1. keyup事件全局修改所有行：原代码中使用$(".quantity_input").val()、$(".price_value").html()、$(".total_value_row").text()都是选择所有匹配的元素，而非触发事件的当前行内元素。
2. 删除按钮未实现删除逻辑：仅弹出提示，未定位到当前行并执行删除操作。
3. DOM结构错误：添加行时存在多余的闭合</a>标签，导致DOM结构异常。

修改后的完整代码 #

JavaScript代码 #

$("#allcb").change(function () {
  $('tbody tr td input[type="checkbox"]').prop(
    "checked",
    $(this).prop("checked")
  );
});

$(document).on("keyup", ".quantity_input", function() {
  var value_input = 0;
  var price_value = 0;
  var total_value = 0;
  // 定位当前触发事件的输入框
  var $currentInput = $(this);
  // 获取当前输入框的值
  value_input = $currentInput.val();
  // 在当前行内查找价格元素，获取价格值
  price_value = $currentInput.closest('.row').find('.price_value').text().trim();
  // 计算总价，加入||0避免非数字导致NaN
  total_value = parseInt(value_input) * parseInt(price_value) || 0;
  // 在当前行内设置总价文本
  $currentInput.closest('.row').find('.total_value_row').text(total_value);
});

$(document).on("click",".remove_data" , function(){
    // 找到当前按钮所在的row容器
    var $targetRow = $(this).closest('.row');
    // 删除row后面的分隔线hr
    $targetRow.next('hr').remove();
    // 删除当前行
    $targetRow.remove();
});

$(document).ready(function () {
  $("#add_data").click(function () {
    var grid = document.getElementById("Table1");
    var str = '';

    var checkBoxes = grid.getElementsByTagName("INPUT");
    for (var i = 0; i < checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &&
        checkBoxes[i].name !== "allcb" &&
        !checkBoxes[i].hasCovered
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        // 修正DOM结构，移除多余的</a>标签
        str +=
          '<div class="row" ><div class="col-md-8"><p class="me-3" > ' +
          '<a href="#" class="text-body">' +
          '<button type="button" class="remove_data">Remove item</button></a>&nbsp' +
          '<span>Quantity</span>&nbsp' +
          row.cells[2].innerHTML +
          "</p> " +
          '<span class="me-1">Price </span>&nbsp' +
          '<span class="me-1 price_value">' +
          row.cells[1].innerHTML +
          "</span>&nbsp" +
          '<input type="number" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp'+
          '<span class="total_value_row">0</span> '+
          "</div></div><hr>";
          checkBoxes[i].hasCovered = true;
        }
      }
      $(".whole-div-class").append(str);
  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" id="Table1">
  <thead>
    <tr>
      <th>
        <input type="checkbox" id="allcb" name="allcb" />
      </th>
      <th>Price</th>
      <th>Quantity</th> <!-- 修正原代码的td为th，保持表头统一 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" id="cb1" name="cb1" />
      </td>
      <td>200</td>
      <td>25</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="cb2" name="cb2" />
      </td>
      <td>300</td>
      <td>30</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="cb3" name="cb3" />
      </td>
      <td>400</td>
      <td>50</td>
    </tr>
  </tbody>
</table>
<br />
<button type="button" id="add_data">Add data</button>
<hr>

<div class="row whole-div-class"></div>

关键修改点说明 #

1. 定位当前行元素：使用$(this).closest('.row')找到触发事件元素所在的最外层.row容器，再通过.find()在容器内查找目标元素，确保只操作当前行。
2. 删除逻辑实现：点击删除按钮时，先找到当前行，再删除行本身和后面的<hr>分隔线，保证页面结构整洁。
3. 修复DOM结构：移除添加行时多余的</a>标签，同时修正表头的<td>为<th>，符合HTML语义规范。
4. 避免NaN问题：计算总价时加入|| 0，防止输入非数字或空值导致计算结果为NaN。

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