Find td index and apply the color to tr

Question

I want to find the td position and apply the color for tr. For example the class (jqx-grid-group-expand or jqx-grid-group-collapse) contains in first position of the td in tr tag(see : row0grid) then the row color is red. the same class contain in the second position of the td (see : row1grid) then the row color is blue. How to I apply the color. Please help me. Am new of this field.

<table id="contenttablegrid" border="1">
    <tr id="row0grid">
        <td class=" jqx-grid-group-cell jqx-grid-cell-pinned jqx-grid-group-expand jqx-icon-arrow-down">
        </td>
        <td class="jqx-grid-group-cell">
            Department: Dept1
        </td>
        <td class=" jqx-grid-group-cell">
        </td>
        <td class=" jqx-grid-group-cell">
        </td>
        <td class=" jqx-grid-group-cell">
        </td>
        <td class=" jqx-grid-group-cell">
            99
        </td>
        <td class=" jqx-grid-group-cell">
            135.6
        </td>
    </tr>
    <tr id="row1grid">
        <td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
        </td>
        <td class=" jqx-grid-group-cell jqx-grid-cell-pinned jqx-grid-group-expand jqx-icon-arrow-down">
        </td>
        <td class=" jqx-grid-group-cell">
        </td>
        <td class=" jqx-grid-group-cell">
        </td>
        <td class=" jqx-grid-group-cell">
            Project: Project1
        </td>
        <td class=" jqx-grid-group-cell">
            70.7
        </td>
        <td class=" jqx-grid-group-cell">
            100.45
        </td>
    </tr>
    <tr id="row2grid">
        <td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
        </td>
        <td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
        </td>
        <td class="jqx-grid-group-cell">
        </td>
        <td class=" jqx-grid-group-cell">
        </td>
        <td class=" jqx-grid-group-cell" title="Balaji">
            <span style="color: red; font-weight: bold;">Super</span><span style="color: Blue;
                font-style: italic;"> Balaji </span>
        </td>
        <td class=" jqx-grid-group-cell" title="25.30">
            <td>
                25.30
            </td>
        </td>
        <td class=" jqx-grid-group-cell" title="45.45">
            <td style="text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; text-align: center;
                margin-top: 4px;">
                45.45
            </td>
        </td>
    </tr>
</table>

Answer 1

You can use this:

$('.jqx-grid-group-expand, .jqx-grid-group-collapse').each(function(){
   var color = $(this).index() === 0 ? 'red' : 'blue';
   $(this).closest('tr').css('background', color);
});

Demo

Answer 2

You can use has() to find the <tr> with matching elements as follows:

$("#contenttablegrid tr").
   has("td.jqx-grid-group-expand:first-child, td.jqx-grid-group-collapse:first-child")
  .addClass("red")
.end()
  .has("td.jqx-grid-group-expand:nth-child(2), td.jqx-grid-group-collapse:nth-child(2)")
  .addClass("blue");

Demo