具体化 <td> jQuery元素

Question

我在下拉列表中有商品名称，在数量文本框中有商品名称。 我要添加项目及其数量到表中，如果数量大于零，现在我要检查项目是否已存在于表中，然后将数量求和

<script>
     $(document).ready(function(){

       $("#addBtn").click(function(){

           var rmnameList = document.getElementById("rname");
           var name = rmnameList.options[rmnameList.selectedIndex].text;           
           var qty = $('#qty').val();

           if (qty > 0)
           {
                var tbody = $('#rTable').children('tbody');

                var table = tbody.length ? tbody : $('#rTable');
                //Add row
                table.append('<tr><td>'+ name + '</td><td>'+ qty +'</td></tr>');
            }


        });

   });
    </script>

我找不到相应的<td>元素进行更新。

我的jQuery选择器是：

$('#rTable tbody tr td:first-child')

它返回：

[<td>​BUN​</td>​, <td>​Ketchup​</td>​, <td>​Banana​</td>​]

Answer 1

在tr上使用属性存储rname，然后使用它检查元素是否存在

 $(document).ready(function() { $("#addBtn").click(function() { var name = $('#rname option:selected').text(); var qty = $('#qty').val(); if (qty > 0) { var tbody = $('#rTable').children('tbody'); var table = tbody.length ? tbody : $('#rTable'); //Add row var $tr = table.find('tr[data-rname="' + name + '"]'); if ($tr.length) { $tr.find('td:last-child').text(function(i, t) { return +t + +qty; }) } else { table.append($('<tr><td>' + name + '</td><td>' + qty + '</td></tr>').attr('data-rname', name)); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="rname"> <option></option> <option>1</option> <option>2</option> <option>3</option> </select> <input id="qty" /> <button id="addBtn">Add</button> <br /> <table id="rTable"></table> 

Answer 2

您可以使用.filter

var target = table.find("tr").filter(function(idx, tr) {
  var td = tr.find('td:first-child');
  return (td.text() === name);
});

if (target.length > 0) {
  // Sum up
} else {
  // Create new
}

我建议您使用<tr data-name="' + name + '"><td>'+ name + '</td><td>'+ qty +'</td></tr>创建带有data-name的tr

然后可以将过滤器简化为：

var target = table.find("tr").filter('[data-name="' + name + '"]');

Answer 3

您可以使用.filter()来检查表中是否已存在该项目。

var count = $('#rTable td').filter(function() {
        return $(this).text().trim() == name;
    });

如果表包含该元素，则count将大于一个。

您也可以使用$("#rname option:selected").text(); 为了获得选择的选项文本。

$("#addBtn").click(function() {
    var name = $("#rname option:selected").text();
    var qty = parseInt($('#qty').val());
    var count = $('#rTable td').filter(function() {
        return $(this).text().trim() == name;
    });
    if (qty > 0 && count == 0) {
        var tbody = $('#rTable').children('tbody');
        var table = tbody.length ? tbody : $('#rTable');
        //Add row
        table.append('<tr><td>' + name + '</td><td>' + qty + '</td></tr>');
    }
});