如果数据不存在，则在表上追加jQuery

Append on table if data not exist jQuery

本文关键字：追加 jQuery 数据 不存在 如果      更新时间：2024-04-09

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

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 = '';    
});

在我的代码中发生的事情是，它没有在行进行过滤：包含。

我的代码出了什么问题？

首先，您必须测试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 2"时，您希望允许"test 21"和"test"）。要做到这一点，你可以这样过滤：

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

Fiddle

尝试：

$('#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("");
});

此处更新了fiddle

相关文章：