0

我有一个表允许用户进行多个股票输入

<table class="table1" id="table1">
  <thread>
    <tr>
      <th scope="col">Item Name</th>
      <th scope="col">Qty</th>
      <th scope="col">Rate</th>
      <th scope="col">Amount</th>
    </tr>
  </thread>
  <tbody>
    <tr>
     <td><input type="text"/></td>
     <td><input type="text" class="num" id="qty"/></td>
     <td><input type="text" class="num" id="rate"/></td>
     <td><input type="text" class="num" id="amt"/></td>
   </tr>
 </tbody>
</table>
<a id="add"><button>Add</button></a>

这段代码是添加一个新行：

<script type="text/javascript">
  $(document).ready(function() {
    $("#add").click(function() {
      var newrow = $("<tr><td><input type="text"/></td><td><input type=\"text\" id=\"qty\"/></td><td><input type="\text\" id="\rate\"/></td><td><input type="\text\" id="\amt\"/></td></tr>");
    newrow.insertAfter('#table1 tbody>tr:last');
    return false;
  });
  $(".num").keyup(function() {
    var id = $(this).attr('id');
    if (id == 'qty') {
      var i = parseFloat($("#rate").val())
      if (!isNaN(i)) {
        var t = ($(this).val()*$("#rate").val());
        $("#amt").val(t.toFixed(2));
      } else {
        $("#amt").val('');
      }
    } else if (id == 'rate') {
      var i = parseFloat($("#qty").val())
      if (!isNaN(i)) {
        var t = ($(this).val()*$("#qty").val());
        $("#amt").val(t.toFixed(2));
      } else {
        $("#amt").val('');
      }
    }
  });
});

计算在表格的第一行上运行良好，但是当我添加第二行时，计算不起作用。我哪里错了？

4

4 回答 4

5

使用事件委托：

$('body').on('keyup', ".num", function() {
    // your code
});

此外，您必须.num向创建的元素添加类，并且多个元素不能具有相同的 ID，而是使用另一个属性（例如data-id，没关系），

var newrow = $('<tr><td><input type="text" /></td><td><input type="text" class="num" data-id="qty"/></td><td><input type="text" data-id="rate"/></td><td><input type="text" class="num" data-id="amt" /></td></tr>');

并在您的函数中使用以下属性获取它们：

$('body').on('keyup', ".num", function() {
    var $row = $(this).closest('tr');
    var $amt = $row.find('[data-id="amt"]');
    var $qty = $row.find('[data-id="qty"]');
    var $rate = $row.find('[data-id="rate"]');

    var id = $(this).attr('data-id');

    if (id == 'qty') {
        // now using `$rate` instead of $('#rate')
        var i = parseFloat($rate.val())

        // other code
    }

    // other code
});
于 2013-06-11T06:55:22.177 回答
1

为新行提供num类（您的新输入没有它），并使用.on：

$(document).on('keyup', '.num', function() {

});

如果您想为尚未在 DOM 中的元素添加事件侦听器，这是必需的。

此外，元素 ID 应该是唯一的。您的新输入将获得与前一行相同的 ID。

于 2013-06-11T06:55:28.687 回答
0

尝试这个

<table class="table1" id="table1">
        <thread>
    <tr>
      <th scope="col">Item Name</th>
      <th scope="col">Qty</th>
      <th scope="col">Rate</th>
      <th scope="col">Amount</th>
    </tr>
  </thread>
        <tbody>
            <tr>
                <td>
                    <input type="text" />
                </td>
                <td>
                    <input type="text" class="num" name="qty" id="qty" />
                </td>
                <td>
                    <input type="text" class="num" id="rate" name="rate" />
                </td>
                <td>
                    <input type="text" class="num" id="amt" name="amt" />
                </td>
            </tr>
        </tbody>
    </table>
    <a id="add">
        <button>
            Add</button></a>


     <script type="text/javascript">
    $(document).ready(function () {
        $("#add").click(function () {
            var newrow = $('<tr><td><input type="text"></td><td><input type="text" id="qty" name="qty" class="num"></td><td><input type="text" id="rate" name="rate" class="num"></td><td><input type="text" id="amt" name="amt" class="num"></td></tr>');
            newrow.insertAfter('#table1 tbody>tr:last');


            $('#table1 tbody>tr:last').find('[name="qty"]').keyup(function () {
                var this_tr = $(this).closest('tr');
                ;
                var i = parseFloat(this_tr.find('[name="rate"]').val())
                if (!isNaN(i)) {
                    var t = ($(this).val() * this_tr.find('[name="rate"]').val());
                    this_tr.find('[name="amt"]').val(t.toFixed(2));
                } else {
                    this_tr.find('[name="amt"]').val('');
                }
            });
            $('#table1 tbody>tr:last').find('[name="rate"]').keyup(function () {
                var this_tr = $(this).closest('tr');
                ;
                var i = parseFloat(this_tr.find('[name="qty"]').val())
                if (!isNaN(i)) {
                    var t = ($(this).val() * this_tr.find('[name="qty"]').val());
                    this_tr.find('[name="amt"]').val(t.toFixed(2));
                } else {
                    this_tr.find('[name="amt"]').val('');
                }
            });
            return false;
        });
        $('[name="qty"]').keyup(function () {
            var this_tr = $(this).closest('tr');
            ;
            var i = parseFloat(this_tr.find('[name="rate"]').val())
            if (!isNaN(i)) {
                var t = ($(this).val() * this_tr.find('[name="rate"]').val());
                this_tr.find('[name="amt"]').val(t.toFixed(2));
            } else {
                this_tr.find('[name="amt"]').val('');
            }
        });
        $('[name="rate"]').keyup(function () {
            var this_tr = $(this).closest('tr');
            ;
            var i = parseFloat(this_tr.find('[name="qty"]').val())
            if (!isNaN(i)) {
                var t = ($(this).val() * this_tr.find('[name="qty"]').val());
                this_tr.find('[name="amt"]').val(t.toFixed(2));
            } else {
                this_tr.find('[name="amt"]').val('');
            }
        });

    });
</script>
于 2013-06-11T07:12:51.083 回答
0

这个问题可以通过将事件委托给现有的 closet 父级来解决，例如在您的情况下 is $('#table1')或$(document)which 是页面上所有元素的父级，因此您需要更改它：

$(".num").keyup(function() {

对此：

$("#table").on('keyup', '.num', function() {

我刚刚看到您添加的内容，您在单击添加时添加了相同的 id，因此由于 id 在同一页面中应该是唯一的（same ids for multiple elems is invalid）导致无效的 html 标记。

 var newrow = $("<tr><td><input type='text'/></td>"+
                "<td><input type='text' id='qty'/></td>"+
                "<td><input type='text' id='rate'/></td>"+
                "<td><input type='text' id='amt'/></td></tr>");

当添加到 dom 时，上面的每次都会为多个元素添加相同的 id。你可以尝试这样做：

  $("#add").click(function () {
    var i = $("#table1 tbody>tr:last").index();
    var newrow = $("<tr><td><input type='text'/></td>" +
        "<td><input type='text' class='num' id='qty" + (i) + "'/></td>" +
        "<td><input type='text' class='num' id='rate" + (i) + "'/></td>" +
        "<td><input type='text' class='num' id='amt" + (i) + "'/></td>");
    newrow.insertAfter('#table1 tbody>tr:last');
    return false;
});
于 2013-06-11T07:14:13.897 回答