Question

我想找到td位置并应用tr的颜色。例如，类（jqx-grid-group-expand或jqx-grid-group-collapse）包含tr标签中td的第一个位置（请参阅：row0grid），然后行颜色为红色。同一个类包含在td的第二个位置（参见：row1grid），然后行颜色为蓝色。如何应用颜色。请帮我。这是该领域的新成员。

<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

您可以使用：

$('.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

您可以使用has()查找具有匹配元素的<tr>，如下所示：

$("#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

找到td索引并将颜色应用于tr

2 个答案: