javascript - Append on table if data not exist jQuery - Stack Overflow

admin管理员组

文章数量:1024320

I have a code that appends a row data. What I want is remind the user if they will add details that already exist in the table.

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

What's happening in my code is, it doesn't filter on line :contains.

What is wrong in my code?

I have a code that appends a row data. What I want is remind the user if they will add details that already exist in the table.

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

What's happening in my code is, it doesn't filter on line :contains.

What is wrong in my code?

• javascript
• jquery

Share Improve this question Follow asked Dec 6, 2013 at 7:34 myRMmyRM 24922 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

To start with, you must test the length of a jQuery object to know if there's an element in the DOM :

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

But your code will fail if text.value contains anything that breaks the selector, for example quotes, so you'd better directly test the content with filter :

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

Fixed fiddle

It's possible that what you want isn't in fact, to test if the cell "contains" the string, but if it contains only that string (i.e., you want to allow "test 21" and "test" when there's already "test 2"). To do that, you may filter this way :

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

Fiddle

Try:

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

Updated fiddle here.

I have a code that appends a row data. What I want is remind the user if they will add details that already exist in the table.

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

What's happening in my code is, it doesn't filter on line :contains.

What is wrong in my code?

I have a code that appends a row data. What I want is remind the user if they will add details that already exist in the table.

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

What's happening in my code is, it doesn't filter on line :contains.

What is wrong in my code?

• javascript
• jquery

Share Improve this question Follow asked Dec 6, 2013 at 7:34 myRMmyRM 24922 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

To start with, you must test the length of a jQuery object to know if there's an element in the DOM :

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

But your code will fail if text.value contains anything that breaks the selector, for example quotes, so you'd better directly test the content with filter :

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

Fixed fiddle

It's possible that what you want isn't in fact, to test if the cell "contains" the string, but if it contains only that string (i.e., you want to allow "test 21" and "test" when there's already "test 2"). To do that, you may filter this way :

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

Fiddle

Try:

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

Updated fiddle here.

本文标签： javascriptAppend on table if data not exist jQueryStack Overflow