Jagd
Jagd

Reputation: 7306

jQuery selector selecting all rows... why?

I have a standard HTML table that looks something like this in structure:

<table>
  <tbody>
    <tr>
      <td>FOOTER</td>
      <td>
          ... other td columns
      </td>
    </tr>
    <tr>
      <td>some other row that I don't want selected</td>
      <td>
          ... other td columns
      </td>
    </tr>
  </tbody>
</table>

What I would like to do is select only the tr's that contain the text FOOTER in a td, and then set the font-weight to bold for all td's under the selected tr's. My problem is that the jQuery selector I have is setting all td's within the table to bold and I'm not sure why.

Here's my selector thus far:

$("tr:contains('FOOTER')").children("td").css("font-weight", "bold");

Upvotes: 0

Views: 75

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Perhaps your table is nested inside another. So the tr:contains() will match the parent tr of the whole table, and then proceed to find the td and set them to bold..

Perhaps

$("td:contains('FOOTER')").siblings().css("font-weight", "bold");

would be a better candidate (scrap that idea as it would do the same by applying the bold at a higher td)

Upvotes: 4

Related Questions