如果数据不存在，则附加在表上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) {

固定小提琴

这有可能是你想要的是不是事实，以测试细胞“包含”字符串，但如果它仅包含字符串（例如，要允许"test 21"和"test"时，有已经"test 2" ）。 为此，您可以使用以下方式进行过滤：

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

小提琴

Answer 2

尝试：

$('#try').click(function () {
    var test = $("#add").val();
    var sample = $("#add2").val();
    var flag = 0;
    $("#test").find("tr").each(function () { //iterate through rows
        var td1 = $(this).find("td:eq(0)").text(); //get value of first td in row
        var td2 = $(this).find("td:eq(1)").text(); //get value of second td in row
        if ((test == td1) && (sample == td2)) { //compare if test = td1 AND sample = td2
            flag = 1; //raise flag if yes
        }
    });
    if (flag == 1) {
        alert('not allowed');
    } else {
        $('#test').append('<tr><td>' + test + '</td><td>' + sample + '</td></tr>');
    }
    $("#add").val("");
    $("#add2").val("");
});

在这里更新了小提琴。