CODEWITHSUNDEEP
javascriptjqueryhtml-tablesiblings
anmarti
anmarti

Reputation: 5143

Can't get the siblings value within a html table with jQuery

I have a 5 x 5 table. Each cell is an asp.net textbox. I want to get al the 5 textbox values of the last row with a non empty textbox. For example:

enter image description here

This should get HELL O MY FRIE ND

But I get all the values BUT the last (ND). I don't know why. Here's my code:

// RIGHT HERE, $(this) referes to the whole table
$(this).find('input[value!=""]')
        // I get the last edited textbox
        .last()
        // Go up to the parent <td>
        .parent('td')
        .siblings('td')
        // I get all my brothers of type input 
        .children(':input')
        .each(function () {
            alert($(this).val());
        });

I am doing something wrong but what? thank you.

Upvotes: 0

Views: 1714

Answers (5)

wirey00
wirey00

Reputation: 33661

You should do something like this

$(this).find('tr').filter(function() { // find all trs
    // returns the row if all inputs are filled  
    return $(this).find('input').filter(function() {
        return $(this).val().length > 0
    }).length == 5; // check to make sure row has 5 unempty textboxes
}).last() // get the last tr returned with no empty textboxes
.find('input').each(function() { // find inputs
    console.log($(this).val());
});​

http://jsfiddle.net/E5hnA/

Your problem lies within you not filtering by row.. but finding the the last unempty textbox.. then traversing starting there

$(this).find('input[value!=""]')  // find all inputs that are not empty
    .last() // get the last one

So what happens when there is an input in the last row that has an unempty textbox? That's the row you are getting. What I'm doing in my example is.

Find all rows > Filter-return the ones that has all inputs filled > get the last one in the returned collection > then do whatever - Since now you have the last row with all inputs filled

Upvotes: 1

Aust
Aust

Reputation: 11622

The problem lies when you call .siblings() - that returns all other <td> elements that has the same parent as your currently selected <td> element. The problem can be solved by traversing up another step in the DOM and then selecting the children as has been shown by @Adrian, @Quintin Robinson, @Sushanth --, and @wirey.

I figured that I would post an answer so you would have an explanation since all other answers solved your problem but didn't explain what was wrong. And now here is how I would change your code :)

$(this).find('input[value!=""]:last')
    .parents('tr')
    .find('td input')
    .each(function () {
        alert($(this).val());
    });

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

Try this

$(this).find('input[value!=""]')

        .closest('tr')
        .prev('tr')
        .children(':input')
        .each(function () {
            alert($(this).val());
        });

Upvotes: 0

Quintin Robinson
Quintin Robinson

Reputation: 82355

You could use something like this..

$(this).find('input[value!=""]:last')
       .parents("tr:first")
       .find(":text")
       .each(...);

Upvotes: 1

Adriano Carneiro
Adriano Carneiro

Reputation: 58615

You should use parents() and search for the tr and then all input inside it:

$(this).find('input[value!=""]')
       .last()
       .parents('tr')
       .find('input')
       .each(function () {
           alert($(this).val());
        });

Upvotes: 1

Related Questions