Question

我需要使用jQuery来执行基本的数学函数，以及动态地向表中添加其他行。到目前为止，我有这段代码：

  <script type="text/javascript">
    $(document).ready(function() {
      $(".sub").focusout(
        function() {
          $("#net").html('');
          var gross = $("#gross").val();
          var tare = $("#tare").val();
          var net = (gross - tare);
          $("#net").html(Math.round(net * 1000) / 1000);
        });

      $("#add").click(function() {
        $('#lineItemTable tbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last');
        return false;
      });
    });
  </script>

我的HTML看起来像这样：

<body>
  <a id="add">add Line</a>
  <table id="lineItemTable">
    <tr>
      <th>Gross</th>
      <th>Tare</th>
      <th style="padding-right: 10px">Net Weight</th>
    </tr>

    <tr class="row_to_clone">
      <td>
        <input type='number' step="any" name='gross' id='gross' class='sub' />
      </td>
      <td>
        <input type='number' step="any" name='tare' id='tare' class='sub' />
      </td>
      <td id="calculated">
        <p id='net' class='sub1'></p>
      </td>
    </tr>
  </table>
</body>

现在，在向表中添加另一行之前，基本数学函数可以正常工作，但是在单击add Line按钮后，数学函数对新添加的行不起作用。我在这里缺少什么？

Answer 1

你必须编写一个函数，并在插入html后再次调用它。调用网站时，新的html不在DOM中：

 <script type="text/javascript">

function do_math() {
          $("#net").html('');
          var gross = $("#gross").val();
          var tare = $("#tare").val();
          var net = (gross - tare);
          $("#net").html(Math.round(net * 1000) / 1000);
        });


$(document).ready(function() {
      $(".sub").focusout(
      do_math();        

);

      $("#add").click(function() {
        $('#lineItemTabletbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last');
do_math();        
return false;
      });
    });
  </script>

Answer 2

您基本上html元素违反了cloning规则id。根据{{1}}规则，DOM中的html应为 id 。所以我建议将unique更改为id，并使用class获取正确的元素，如下所示：

<强> DEMO

您更新的 html 如下：

$(this)

和 JS 将是：

<a id="add">add Line</a>
<table id="lineItemTable">
    <tr>
      <th>Gross</th>
      <th>Tare</th>
      <th style="padding-right: 10px">Net Weight</th>
    </tr>

    <tr class="row_to_clone">
      <td>
        <input type='number' step="any" name='gross' class='gross sub' /> 
        <!-- Remove id and add it as class-->
      </td>
      <td>
        <input type='number' step="any" name='tare' class='net sub' />
        <!-- Remove id and add it as class-->
      </td>
      <td>
        <p class='net'></p>
        <!-- Remove id and add it as class-->
      </td>
    </tr>
</table>

jQuery数学函数不适用于动态添加新表行

2 个答案: