我有以下 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/

10-12 00:09
查看更多