javascript - 通过 jquery 检查特定 <td> 中是否存在项目

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>