CODEWITHSUNDEEP
jqueryhtml
user3075478
user3075478

Reputation: 137

Select nested rows in a table using JQuery

Given the following html table (it's just an example):

<table>
    <tbody>
        <tr>
            <th>First</th>
            <th>Second</th>
        </tr>
        <tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
            </tr>
            <tr>
                <td>X</td>
                <td>X</td>
            </tr>
        </tr>
        <tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
            </tr>
            <tr>
                <td>X</td>
                <td>X</td>
            </tr>
        </tr>
        <tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
            </tr>
            <tr>
                <td>X</td>
                <td>X</td>
            </tr>
        </tr>
        <tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
            </tr>
            <tr>
                <td>X</td>
                <td>X</td>
            </tr>
        </tr>
    </tbody>
</table>

I want to select the rows that contain "X" (so the td tags also) using JQuery. I can't find the right selector to do this.

I've tried: table tr tr:last-child but this does not work. This small piece of code should means "give me the last tr child that has a tr parent that has a table parent".

UPDATE:

The Xs are just an example. In my real project the rows that i want to select contain a set of input elements. I want to select those rows to hide them but not their content (the input elements). Then i must be able to select the other rows (those that contain the names).

Upvotes: 0

Views: 833

Answers (2)

JohnV
JohnV

Reputation: 59

Can you please explain how your table works that way?

A nested table row inside another row should be in a new table within the row? Which in turned, you are trying to reference two differant tables inside a single row?

is this right?

The follow snippet should do what you ask if you structure your html tables the way showen in my example.

$('table').on('click','td',function(e){

 // e.stopPropagation();
  var t = $(this);
  
  t.find('tr:last-child').toggleClass('highlight');
});
tr:hover { background-color: lightblue; }
.highlight { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>First</th>
            <th>Second</th>
        </tr>
        <tr>
            <td colspan="2">
              <table>
              <tbody>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
            </tr>
            <tr>
                <td>X</td>
                <td>X</td>
            </tr>
            </tbody>
            </table>
            </td>
        </tr>
         <tr>
            <td colspan="2">
              <table>
              <tbody>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
            </tr>
            <tr>
                <td>X</td>
                <td>X</td>
            </tr>
            </tbody>
            </table>
            </td>
        </tr>
                <tr>
            <td colspan="2">
              <table>
              <tbody>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
            </tr>
            <tr>
                <td>X</td>
                <td>X</td>
            </tr>
            </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 0

xhg
xhg

Reputation: 1885

Try .filter()

(Haven't tested the following code)

$("tr")
  .filter(function( index ) {
    return $(this).text().indexOf('X') != -1;
  })

Upvotes: 1

Related Questions