我有以下 HTML 表:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
我想获取每行中没有“treegrid-hide-column”类的所有最后一个元素。
如何在 CSS 或 JS 中做到这一点?
我尝试这样做,但效果不佳。
function addRightBorderOnTreetable() {
var arr = $('.treegridCustom tbody tr td:last-child');
for (var i=0; i<arr.length; i++) {
var currentEl = arr[i];
if ( !$(currentEl).hasClass("treegrid-hide-column") ) {
$(currentEl).css('border-right', '1px solid #bfbfbf');
}
}
}
最佳答案
CSS 没有这个特性,但是你可以用 jQuery 来实现:
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
我们必须逐行进行,因为没有 CSS“最后一个元素不匹配这个类”,并且 jQuery 的
:last
适用于整个集合,而不是这些选举人的每一层的集合。关于javascript - Jquery/JS在没有特定类的每一行中选择最后一个td,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45794084/