Question

我有一个类evo-table的表，它有两个行跨度为4的单元格，后面是四行，每行有两个单元格(Image)。我想使用JavaScript选择每个行的第一个单元格。我知道我可以简单地将类添加到单元格并使用CSS设置样式，但我仅限于下面的表结构。我可以使用$(".highlight").next().css("background","lightgreen");选择CSS并将其添加到第一行的第一个单元格，但是我无法选择其余行的第一个单元格。这是代码：

HTML：（这只是一个DEMO）

<table class="evo-table">
    <tr>
        <td rowspan="4">Merged Cell 1</td>
        <td rowspan="4" class="highlight">Merged Cell 2</td>
        <td>Unmerged Cell 1</td>
        <td>Unmerged Cell 2</td>
    </tr>
    <tr>
        <td>Unmerged Cell 3</td>
        <td>Unmerged Cell 4</td>
    </tr>
    <tr>
        <td>Unmerged Cell 5</td>
        <td>Unmerged Cell 6</td>
    </tr>
    <tr>
        <td>Unmerged Cell 7</td>
        <td>Unmerged Cell 8</td>
    </tr>
<table>

的jQuery / JavaScript的：

var tableObj = $(".evo-table");
var mergeLength = $(".evo-table .highlight").attr("rowspan");
var firstRowAfterHighlight = $(".evolution-table .highlight").parent().next().index + 1;
$(".highlight").next().css("background","lightgreen");
for (count = 0;  count < mergeLength; count = count + 1) {
    $(".evolution-table tr:nth-child(" + (firstRowAfterHighlight + count) + ") td:first-child:not(.highlight)").css("background-color", "green")
}

我正在使用rowspan单元格的.highlight值来查找行数（我可以使用$(".evo-table tr").length;来获取它，但前一个在我的情况下更有用，因为我想要选择紧靠单元格右侧的行）并且我在第一行之后找到行的索引并使用count语句的for变量继续前进到下一行，并使用:first-child上的td选择器选择每行的第一个单元格。代码似乎不起作用。

jsFiddle

如果您发现我的代码中有任何错误，需要更多详细信息或有解决方案，请回复。谢谢。

Answer 1

我使用.each函数迭代每一行。然后我使用了:not选择器来忽略属性为[rowspan]的元素。

＆＃13;

$(".evo-table tr").each(function () {
  $(this).find("td:not([rowspan]):first").css("background-color", "red")
});

＆＃13;

* {
  font-family:Arial;
}
.evo-table {
  border-collapse:collapse;
  border:1px solid lightgrey;
}
.evo-table td {
  padding:4px;
  border: 1px solid lightgrey;
}
.highlight {
  background-color:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="evo-table">
    <tr>
        <td rowspan="4">Merged Cell 1</td>
        <td rowspan="4" class="highlight">Merged Cell 2</td>
        <td>Unmerged Cell 1</td>
        <td>Unmerged Cell 2</td>
    </tr>
    <tr>
        <td>Unmerged Cell 3</td>
        <td>Unmerged Cell 4</td>
    </tr>
    <tr>
        <td>Unmerged Cell 5</td>
        <td>Unmerged Cell 6</td>
    </tr>
    <tr>
        <td>Unmerged Cell 7</td>
        <td>Unmerged Cell 8</td>
    </tr>
<table>
<div style="font-size:12px;color:lightgrey;">
Yellow = .highlight class; Green = Selected using jQuery;
</div>

＆＃13;

Answer 2

如果你只是想做造型，你不需要javascript，你可以使用纯CSS3：

td[rowspan] + td:not([rowspan]), tr > td:not([rowspan]):first-child {
    background: red;
}

它会选择td，而rowspan在td rowspan属性（第一个tr）和所有第一个{{{{}}之后直接跟随td 1}} tr中没有rowspan属性（所有其他tr）。

如果你想在JavaScript中使用它，你可以使用与jQuery相同的CSS选择器。无需遍历表行：

$('td[rowspan] + td:not([rowspan]), tr > td:not([rowspan]):first-child')

使用JavaScript / jQuery选择合并单元格后面的每一行的第一个单元格

2 个答案: