通过 jquery 检查项目是不是存在于特定的 <td> 中

Posted

技术标签:

【中文标题】通过 jquery 检查项目是不是存在于特定的 <td> 中【英文标题】:Check if item exists in specific <td> by jquery通过 jquery 检查项目是否存在于特定的 <td> 中 【发布时间】:2015-09-24 19:42:37 【问题描述】:

我在下拉列表中有项目名称和一个数量文本框。如果数量大于零,我将项目及其数量添加到表中, 现在我想检查表中是否已经存在项目,然后将数量相加

<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>

我找不到要更新的相应 &lt;td&gt; 元素。

我的 jquery 选择器是:

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

然后它返回:

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

【问题讨论】:

您如何访问td?你的 jquery 选择器是什么? @Shaharyar $('#rTable tbody tr td:first-child') 【参考方案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>

【讨论】:

它对我有用,但是这条线有什么作用return +t + +qty; @Mateen-ul-haq 将td 的现有值和当前数量相加....+t+qty 用于将字符串值转换为数字值 【参考方案2】:

您可以使用.filter() 来检查该项目是否已在桌子上。

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

如果表格包含该元素,count 将大于 1。

您也可以使用$("#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>');
    
);

【讨论】:

【参考方案3】:

您可以使用.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

我建议你使用&lt;tr data-name="' + name + '"&gt;&lt;td&gt;'+ name + '&lt;/td&gt;&lt;td&gt;'+ qty +'&lt;/td&gt;&lt;/tr&gt; 来创建一个trdata-name

那么过滤器可以简化为:

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

【讨论】:

以上是关于通过 jquery 检查项目是不是存在于特定的 <td> 中的主要内容,如果未能解决你的问题,请参考以下文章

如何检查项目是不是存在于多个数组中

如何检查图像是不是存在于特定位置?

检查特定序列是不是存在于休眠中

如何检查具有特定角色的成员是不是存在于 discord.js 的特定语音通道中

如何检查文件是不是存在于android设备的特定文件夹中

如何检查一个项目是不是存在于动态数组中?