CODEWITHSUNDEEP
jquery
Jim Balo
Jim Balo

Reputation: 639

jQuery to select specific cells in specific column

I need to change the color to red for all cells with a value of High in the column that has a header of "Severity" (not using the column index):

<table>
    <tbody>
        <tr>
        </tr>
        <tr>
          <th title="System.String">Name</th>
          <th title="System.String">Value</th>
          <th title="LinqTest.CvssSeverity">Severity</th>
        </tr>
        <tr>
          <td>AccessVector</td>
          <td>RemoteNetwork</td>
          <td>High</td>
        </tr>
        <tr>
          <td>AccessComplexity</td>
          <td>High</td>
          <td>Low</td>
        </tr>
        <tr>
          <td>AuthenticationRequired</td>
          <td>None</td>
          <td>High</td>
        </tr>
        <tr>
          <td>ConfidentialityImpact</td>
          <td>Partial</td>
          <td>Medium</td>
        </tr>
        <tr>
          <td>IntegrityImpact</td>
          <td>Partial</td>
          <td>Medium</td>
        </tr>
        <tr>
          <td>AvailabilityImpact</td>
          <td>Partial</td>
          <td>Medium</td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
        </tr>
        <tr>
          <th title="System.String">Name</th>
          <th title="System.String">Value</th>
              <th title="System.String">SomeOtherCol</th>
          <th title="LinqTest.CvssSeverity">Severity</th>
        </tr>
        <tr>
          <td>AccessVector</td>
          <td>RemoteNetwork</td>
              <td>1234</td>
          <td>High</td>
        </tr>
        <tr>
          <td>AccessComplexity</td>
          <td>High</td>
            <td>High</td>
          <td>Low</td>
        </tr>
        <tr>
          <td>AuthenticationRequired</td>
          <td>None</td>
              <td>1234</td>
          <td>High</td>
        </tr>
        <tr>
          <td>ConfidentialityImpact</td>
          <td>Partial</td>
              <td>1234</td>
          <td>Medium</td>
        </tr>
        <tr>
          <td>IntegrityImpact</td>
          <td>Partial</td>
              <td>1234</td>
          <td>Medium</td>
        </tr>
        <tr>
          <td>AvailabilityImpact</td>
          <td>Partial</td>
              <td>1234</td>
          <td>Medium</td>
        </tr>
    </tbody>
</table>

Note that this should be for all tables on the page with a Severity column (there might be an Id on the tables, but they are auto-generated, so I cannot use the Ids).

What is a good way to accomplish this?

Here is a slight modification to null's solution that also works with nested tables (in case it helps somebody...):

$("th:contains('Severity')").parent().closest('table').each(function () {
    var idx = $(this).find("th:contains('Severity')").index() + 1;
    $(this).find("td:nth-child(" + idx + "):contains('High')").css("color", "red");
});

Upvotes: 1

Views: 115

Answers (2)

dsgriffin
dsgriffin

Reputation: 68596

Not very pretty, but this is fairly adaptable:

// Get the index of the 'Severity' table header and add one (as index() begins at 0)
var idx = $("table th:contains('Severity')").index() + 1;
// Using nth-child in combination with that index (as to target the correct column)
// Colour each cell which contains the text 'High' in red. 
$("table td:nth-child("+ idx +"):contains('High')").css("color", "red");

jsFiddle here

In regard to your comment, this would work for all tables which include a 'Severity' header:

$("table").each(function(){
  var idx = $(this).find("th:contains('Severity')").index() + 1;
  $(this).find("td:nth-child("+ idx +"):contains('High')").css("color", "red");
});

jsFiddle here

Upvotes: 3

Runny
Runny

Reputation: 9

$("td:nth-child(3):contains('High')").css("background-color", "red");

The above code will solve your issue. and i have updated the above mentioned fiddle code. link below

http://jsfiddle.net/jkYVq/2/

Upvotes: 0

Related Questions