Question

我对编码特别是jquery非常陌生。我的目标是建立一个可以动态添加行的表（我已经实现了这一点），然后允许用户编辑5个条件列。然后，小计栏为每行添加5个标准值。

我已经获得了可以在预制表var $tblrows = $("#tblProducts tr:gt(0)");中工作的代码，但是当我将该函数应用于动态表var $tblrows = $("#tb tr:gt(0)");时，它不适用于动态创建的行，仅适用于在页面加载。

我的猜测是，tr:gt()选择器在创建新行时没有更新。

如何通过创建行来更新tr:gt()选择器？

谢谢您的帮助

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  </head>
  
  <body>
    <div id="resultsContainer"class="container-fluid mb-4 table-responsive" style="padding-right: 5%; padding-left: 5%">
    <table  class="table table-hover small-text table-bordered" id="tb">
      <tr class="tr-header">
        <th>Program</th>
        <th>Criteria 1</th>
        <th>Criteria 2</th>
        <th>Criteria 3</th>
        <th>Criteria 4</th>
        <th>Criteria 5</th>
        <th>Sub-Total</th>
        <th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="fas fa-plus"></span></a></th>
      <tr>
        <td><input type="text" name="programid" class="form-control"></td>
        <td><input type="text" name="criteria1id" class="form-control"></td>
        <td><input type="text" name="criteria2id" class="form-control"></td>
        <td><input type="text" name="criteria3id" class="form-control"></td>
        <td><input type="text" name="criteria4id" class="form-control"></td>
        <td><input type="text" name="criteria5id" class="form-control"></td>
        <td><input type="text" name="subtot" class="subtot" value="0"/></td>
        <td><a href='javascript:void(0);'  class='remove'><span class='fas fa-minus'></span></a></td>
      </tr>
    </table>
    </div>
     
    <div id="tblProductsContainer"class="container-fluid mb-4 table-responsive" style="padding-right: 5%; padding-left: 5%">
    <table id="tblProducts">
    <thead>
        <tr>
            <td>Program Name</td>
            <td>Criteria 1</td>
            <td>Criteria 2</td>
            <td>Criteria 3</td>
            <td>Criteria 4</td>
            <td>Criteria 5</td>
            <td>Sub-total</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" class="form-control" value="Program One" name="programName" /></td>
            <td><input type="text" class="form-control" value="1" name="criteria1id"/></td>
            <td><input type="text" class="form-control" value="2" name="criteria2id"/></td>
            <td><input type="text" class="form-control" value="3" name="criteria3id"/></td>
            <td><input type="text" class="form-control" value="4" name="criteria4id"/></td>
            <td><input type="text" class="form-control" value="5" name="criteria5id"/></td>
            <td><input type="text" class="subtot" value="0" name="subtot"/></td>
        </tr>
        <tr>
            <td><input type="text" class="form-control" value="Program Two" name="programName" /></td>
            <td><input type="text" class="form-control" value="10" name="criteria1id"/></td>
            <td><input type="text" class="form-control" value="9" name="criteria2id"/></td>
            <td><input type="text" class="form-control" value="8" name="criteria3id"/></td>
            <td><input type="text" class="form-control" value="7" name="criteria4id"/></td>
            <td><input type="text" class="form-control" value="6" name="criteria5id"/></td>
            <td><input type="text" class="subtot" value="0" name="subtot"/></td>
        </tr>
        <tr>
            <td><input type="text" class="form-control" value="Program Three" name="programName" /></td>
            <td><input type="text" class="form-control" value="1" name="criteria1id"/></td>
            <td><input type="text" class="form-control" value="1" name="criteria2id"/></td>
            <td><input type="text" class="form-control" value="1" name="criteria3id"/></td>
            <td><input type="text" class="form-control" value="1" name="criteria4id"/></td>
            <td><input type="text" class="form-control" value="1" name="criteria5id"/></td>
            <td><input type="text" class="subtot" value="0" name="subtot"/></td>
        </tr>
    </tbody>
    </table>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <script>
    $(function(){
        $('#addMore').on('click', function() {
                  var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
                  data.find("input").val('');
         });
         $(document).on('click', '.remove', function() {
             var trIndex = $(this).closest("tr").index();
                if(trIndex>1) {
                 $(this).closest("tr").remove();
               } else {
                 alert("Sorry!! Can't remove first row!");
               }
          });
    });      
    </script>
    
    <script>
      //var $tblrows = $("#tblProducts tr:gt(0)");
      var $tblrows = $("#tb tr:gt(0)");
      $tblrows.each(function (index) {
          var $tblrow = $(this);
          $tblrow.find('.form-control').on('change', function () {
              var criteria1id = $tblrow.find("[name=criteria1id]").val();
              var criteria2id = $tblrow.find("[name=criteria2id]").val();
              var criteria3id = $tblrow.find("[name=criteria3id]").val();
              var criteria4id = $tblrow.find("[name=criteria4id]").val();
              var criteria5id = $tblrow.find("[name=criteria5id]").val();
              var subTotal = parseFloat(criteria1id) + parseFloat(criteria2id) + parseFloat(criteria3id) + parseFloat(criteria4id) + parseFloat(criteria5id);
      
              if (!isNaN(subTotal)) {
                  $tblrow.find('.subtot').val(subTotal.toFixed(1));
              }
          });    
      });
    </script>
  </body>
</html>

Answer 1

问题：总计未应用于动态生成的row

解决方案：


您需要将change事件附加到新生成的文本框中

创建一个函数，以获取每个文本框更改事件的小计

请检查以下代码：

$(function(){
            $('#addMore').on('click', function() {
                var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
                data.find("input").val('');
            });
            $(document).on('click', '.remove', function() {
                var trIndex = $(this).closest("tr").index();
                if(trIndex>1) {
                    $(this).closest("tr").remove();
                } else {
                    alert("Sorry!! Can't remove first row!");
                }
            });

            $(document).on('change', '#tb input[name=criteria1id]', function () {
                calcSubTotal();
            });
        });

        function calcSubTotal()
        {
            //var $tblrows = $("#tblProducts tr:gt(0)");
            var $tblrows = $("#tb tr:gt(0)");
            $tblrows.each(function (index) {
                var $tblrow = $(this);
                $tblrow.find('.form-control').on('change', function () {
                    var criteria1id = $tblrow.find("[name=criteria1id]").val();
                    var criteria2id = $tblrow.find("[name=criteria2id]").val();
                    var criteria3id = $tblrow.find("[name=criteria3id]").val();
                    var criteria4id = $tblrow.find("[name=criteria4id]").val();
                    var criteria5id = $tblrow.find("[name=criteria5id]").val();
                    
                    if (isNaN(parseFloat(criteria1id))) criteria1id = 0;
                    if (isNaN(parseFloat(criteria2id))) criteria2id = 0;
                    if (isNaN(parseFloat(criteria3id))) criteria3id = 0;
                    if (isNaN(parseFloat(criteria4id))) criteria4id = 0;
                    if (isNaN(parseFloat(criteria5id))) criteria5id = 0;
                    
                    var subTotal = parseFloat(criteria1id) + parseFloat(criteria2id) + parseFloat(criteria3id) + parseFloat(criteria4id) + parseFloat(criteria5id);

                    if (!isNaN(subTotal)) {
                        $tblrow.find('.subtot').val(subTotal.toFixed(1));
                    }
                });
            });
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" />

<div id="resultsContainer" class="container-fluid mb-4 table-responsive" style="padding-right: 5%; padding-left: 5%">
    <table class="table table-hover small-text table-bordered" id="tb">
        <tr class="tr-header">
            <th>Program</th>
            <th>Criteria 1</th>
            <th>Criteria 2</th>
            <th>Criteria 3</th>
            <th>Criteria 4</th>
            <th>Criteria 5</th>
            <th>Sub-Total</th>
            <th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="fas fa-plus"></span></a></th>
        <tr>
            <td><input type="text" name="programid" class="form-control"></td>
            <td><input type="text" name="criteria1id" class="form-control"></td>
            <td><input type="text" name="criteria2id" class="form-control"></td>
            <td><input type="text" name="criteria3id" class="form-control"></td>
            <td><input type="text" name="criteria4id" class="form-control"></td>
            <td><input type="text" name="criteria5id" class="form-control"></td>
            <td><input type="text" name="subtot" class="subtot" value="0" /></td>
            <td><a href='javascript:void(0);' class='remove'><span class='fas fa-minus'></span></a></td>
        </tr>
    </table>
</div>

<div id="tblProductsContainer" class="container-fluid mb-4 table-responsive" style="padding-right: 5%; padding-left: 5%">
    <table id="tblProducts">
        <thead>
            <tr>
                <td>Program Name</td>
                <td>Criteria 1</td>
                <td>Criteria 2</td>
                <td>Criteria 3</td>
                <td>Criteria 4</td>
                <td>Criteria 5</td>
                <td>Sub-total</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" class="form-control" value="Program One" name="programName" /></td>
                <td><input type="text" class="form-control" value="1" name="criteria1id" /></td>
                <td><input type="text" class="form-control" value="2" name="criteria2id" /></td>
                <td><input type="text" class="form-control" value="3" name="criteria3id" /></td>
                <td><input type="text" class="form-control" value="4" name="criteria4id" /></td>
                <td><input type="text" class="form-control" value="5" name="criteria5id" /></td>
                <td><input type="text" class="subtot" value="0" name="subtot" /></td>
            </tr>
            <tr>
                <td><input type="text" class="form-control" value="Program Two" name="programName" /></td>
                <td><input type="text" class="form-control" value="10" name="criteria1id" /></td>
                <td><input type="text" class="form-control" value="9" name="criteria2id" /></td>
                <td><input type="text" class="form-control" value="8" name="criteria3id" /></td>
                <td><input type="text" class="form-control" value="7" name="criteria4id" /></td>
                <td><input type="text" class="form-control" value="6" name="criteria5id" /></td>
                <td><input type="text" class="subtot" value="0" name="subtot" /></td>
            </tr>
            <tr>
                <td><input type="text" class="form-control" value="Program Three" name="programName" /></td>
                <td><input type="text" class="form-control" value="1" name="criteria1id" /></td>
                <td><input type="text" class="form-control" value="1" name="criteria2id" /></td>
                <td><input type="text" class="form-control" value="1" name="criteria3id" /></td>
                <td><input type="text" class="form-control" value="1" name="criteria4id" /></td>
                <td><input type="text" class="form-control" value="1" name="criteria5id" /></td>
                <td><input type="text" class="subtot" value="0" name="subtot" /></td>
            </tr>
        </tbody>
    </table>
</div>

追加新表行时重新加载：gt（）选择器

1 个答案: