时间戳

首页 > 解决方案 > 脚本不适用于表格标签

jquery - 脚本不适用于表格标签

问题描述

我有一个表格，我需要汇总输入框的值，然后获取这些值并动态填充小计、税收和总计。我的问题是，当表单具有表格标记时，jQuery 脚本将不起作用，如果我从表单中删除表格标记，脚本将正常工作。我需要从 jQuery 脚本中添加/删除一些东西吗？

$(".qty").on('input', function() {
  var self = $(this);
  var unitVal = self.next().val();
  self.next().next().val(unitVal * self.val());
  fnAlltotal();
});

$(".unit").on('input', function() {
  var self = $(this);
  var qtyVal = self.prev().val();
  self.next().val(qtyVal * self.val());
  fnAlltotal();
});

function fnAlltotal() {
  var total = 0
  $(".amount").each(function() {
    total += parseFloat($(this).val() || 0);
  });
  $(".result").val(total);

}
body {
  font-family: sans-serif;
}

.result {
  font-size: 18px;
  font-weight: bold;
  color: #174C68;
}

input {
  background-color: #FEFFB0;
  font-weight: bold;
  text-align: right;
}

.auto-style1 {
  text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <table>
    <tr>
      <th>QTY</th>
      <th>UNIT PRICE</th>
      <th>LINE TOTAL</th>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td></td>
      <td class="auto-style1">Sub Total</td>
      <td>
        <input type="text" class="result" style="width: 190px">
      </td>
    </tr>
  </table>

标签： jqueryhtml

解决方案

问题是您没有找到正确的元素

当你这样做.next或.prev它针对下一个/上一个兄弟但由于你把它放在一个表中，没有下一个或上一个兄弟。

我所做的是将dom遍历到最近的位置，tr然后找到其他输入和小计

closest()这 是https://api.jquery.com/closest/的文档

对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

看看下面

$(".qty").on('input', function() {
  var self = $(this);
  var parentTr = self.closest("tr"); 
  var unitVal = parentTr.find(".unit").val();
  parentTr.find(".amount").val(unitVal * self.val());
  fnAlltotal();
});

$(".unit").on('input', function() {
  var self = $(this);
  var parentTr = self.closest("tr");
  var qtyVal = parentTr.find(".qty").val();
  parentTr.find(".amount").val(qtyVal * self.val());
  fnAlltotal();
});

function fnAlltotal() {
  var total = 0
  $(".amount").each(function() {
    total += parseFloat($(this).val() || 0);
  });
  $(".result").val(total);

}
body {
  font-family: sans-serif;
}

.result {
  font-size: 18px;
  font-weight: bold;
  color: #174C68;
}

input {
  background-color: #FEFFB0;
  font-weight: bold;
  text-align: right;
}

.auto-style1 {
  text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <table>
    <tr>
      <th>QTY</th>
      <th>UNIT PRICE</th>
      <th>LINE TOTAL</th>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td><input type="text" class="qty"></td>
      <td><input type="text" class="unit"></td>
      <td>
        <input type='text' class='amount' style="width: 190px"></td>
    </tr>
    <tr>
      <td></td>
      <td class="auto-style1">Sub Total</td>
      <td>
        <input type="text" class="result" style="width: 190px">
      </td>
    </tr>
  </table>

推荐阅读