javascript - 如果数据不存在则追加到表上 jQuery

Question

我有一个附加行数据的代码。我想要的是提醒用户是否会添加表中已存在的详细信息。

JSFIDDLE

$('#try').click(function() {   
var text = document.getElementById('add');
    if($('#test td:contains("'+text.value+'")') == true) {
        alert('not allowed');
    }else{   
        $('#test').append('<tr><td>' + text.value + '</td></tr>');
    }
text.value = '';    
});

我的代码中发生的情况是，它不会在 :contains 行上进行过滤。

我的代码有什么问题？

Answer 1

首先，您必须测试 jQuery 对象的长度以了解 DOM 中是否存在元素:

if ($('#test td:contains("'+text.value+'")').length) {

但是，如果 text.value 包含任何破坏选择器的内容(例如引号)，您的代码将会失败，因此您最好直接使用 filter 测试内容:

var elems = $('#test td').filter(function(){
     return this.innerHTML.indexOf(text.value) !== -1
});
if (elems.length) {

Fixed fiddle

实际上，您想要的可能不是测试单元格是否“包含”该字符串，而是测试它是否仅包含该字符串(即，您想要允许“test 21” 和 "test"(当已有 "test 2" 时)。为此，您可以这样过滤:

var elems = $('#test td').filter(function(){
     return $(this).text()===text.value
});
if (elems.length) {

Fiddle