Question

我有一个表格，需要对输入框的值求和，然后取这些值并动态填充小计，税金和总计。我的问题是，当表单具有table标记时，jQuery脚本将无法运行，如果我从表单中删除了table标记，则脚本将可以正常运行。我需要从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>

Answer 1

问题在于您找不到合适的元素

当您执行Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top); TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);或.next时，它以下一个/上一个同级为目标，但是由于将其放在表中，因此没有下一个或上一个同级。

我所做的是将dom向上移动到最接近的.prev，然后找到其他输入和小计

以下是tr所做的工作的文档 https://api.jquery.com/closest/

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

在下面看看

closest()

$(".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;
}

Answer 2

您必须使用以下父级和子级方法。

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

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

检出这个https://codepen.io/anon/pen/wxVPgY的塞子

脚本无法与表格标签一起使用

2 个答案: