11

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:

<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.

If it is of any help, the table ID is #tblspecializations

Many thanks for your input.

4 Answers 4

23

You might be able to use :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.

3
  • 1
    Worked like a BOMB, many thanks indeed. I am not too concerned about the values being similar as they are predefined values anyway. I simple added the following function and all worked great: if($('#tblspecialization td:contains('+$slabel+')').length){ alert('A specialization of the same type and months has already been entered.'); return false; } Big up to you for your help Sep 7, 2010 at 11:06
  • 1+ to you for your help and time and simple effective answer Sep 7, 2010 at 11:10
  • 1
    +1 for a nice and short solution, and for teaching me something new :) Sep 7, 2010 at 11:37
2

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.

2
  • I really like this approach and am sure it is better practice, but for this scenario all the code is structured in a certain manner already, albeit not the best manner, I needed a solution I could simply 'plug in' to the current logic. Many thanks for your guidance though! Much appreciated Sep 7, 2010 at 11:05
  • 1+ to you for your help and time Sep 7, 2010 at 11:10
2

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:

$(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:first in 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.

2
  • this also works for me, however I found Andy E's answer to be the shortest solution. Thank you for your time though! It does not go unnoticed. Sep 7, 2010 at 11:07
  • 1+ for you for your help and time Sep 7, 2010 at 11:09
0

if($('table').find('td').filter(function () {return this.innerHTML == '20';}).length>0){ alert("Si");}else{alert("No");}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.