通过 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>
我找不到要更新的相应 <td>
元素。
我的 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
我建议你使用<tr data-name="' + name + '"><td>'+ name + '</td><td>'+ qty +'</td></tr>
来创建一个tr
和data-name
那么过滤器可以简化为:
var target = table.find("tr").filter('[data-name="' + name + '"]');
【讨论】:
以上是关于通过 jquery 检查项目是不是存在于特定的 <td> 中的主要内容,如果未能解决你的问题,请参考以下文章