Javascript jQuery:检查包含某些值的表行是否已经存在
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3657885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Check to see if table row containing certain values exists already
提问by SimonDowdles
I have a jQuery script that appends a row to a table. In short, the user can select a value from a drop down menu, then enter in 'x' amount of months and hits 'add', which appends the row to the table. For example the following row is appended by the user:
我有一个 jQuery 脚本,可以将一行附加到表中。简而言之,用户可以从下拉菜单中选择一个值,然后输入“x”个月的数量并点击“添加”,这会将行附加到表中。例如,用户附加了以下行:
<tr>
<td>Some Value</td>
<td>2</td>
</tr>
Now, if the user performs the same operation again, I need to stop the procedure and alert him that he is trying to add a duplicate value. How - using jQuery - can I check to see whether or not the above row already exists, where the first and second <td>elements have the same value as the data he is trying to add? The reason I say first and second <td>elements only is because there are other <td>elements in the row but they house hidden fields which submit the newly added data to to a server side script, so I'd like to keep the validation as short and simple as possible.
现在,如果用户再次执行相同的操作,我需要停止该过程并提醒他他正在尝试添加重复值。如何 - 使用 jQuery - 我可以检查上面的行是否已经存在,其中第一个和第二个<td>元素与他试图添加的数据具有相同的值?我只说第一个和第二个<td>元素的原因是因为行中还有其他<td>元素,但它们包含将新添加的数据提交到服务器端脚本的隐藏字段,所以我想保持验证尽可能简短可能的。
If it is of any help, the table ID is #tblspecializations
如果有帮助,表 ID 是 #tblspecializations
Many thanks for your input.
非常感谢您的意见。
回答by Andy E
You might be able to use :contains():
您也许可以使用:contains():
$('#tblspecializations tr > td:contains(Some Value) + td:contains(2)').length
- Example
-示例
Be aware, though, that :contains()will return the element if the given string is matched anywhere in the text of the element.
但是请注意,如果给定的字符串与元素文本中的任何位置匹配,则:contains()将返回该元素。
回答by Bozho
I'd suggest you hold your data in some data structure (an (associative) array for example). Thus you will verify the data in the structure, rather than in the DOM.
我建议您将数据保存在某种数据结构(例如(关联)数组)中。因此,您将验证结构中的数据,而不是 DOM 中的数据。
回答by Giuseppe Accaputo
To put it short, the following code in the click()handler should help you in your situation; you can see the whole code in action:
简而言之,click()处理程序中的以下代码应该可以帮助您解决您的情况;你可以看到整个代码在运行:
$(function(){
$("#btn").click(function(){
var table = $("#tblspecializations");
var firstTd = $("td:first", table);
var secondTd = firstTd.next();
if(firstTd.text() == $("#dropdown").val() && secondTd.text() == $("#num").val())
alert("Error: You're trying to add the same entry");
});
});
Short explanation: By using td:firstin the selector, you're getting the first column in your table, and by using the next()function, your getting its sibling, namely the second column.
简短说明:通过td:first在选择器中使用,您将获得表中的第一列,通过使用该next()函数,您将获得它的兄弟,即第二列。

