Question

我有以下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');
        }
    }
}

Answer 1

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适用于整个集合，而不是每个级别的选民。

Answer 2

你可能需要像这样运行循环。我认为这就是你想要实现的目标。

$(document).ready(function() {
addRightBorderOnTreetable();
});

function addRightBorderOnTreetable() {
   
    $.each($('tr'),function(){
        var arr2 = $(this).find('td');
         
        var j = arr2.length;
        for(j=arr2.length; j>-1;j--){
        var currentEl = arr2[j - 1];
          if (!$(currentEl).hasClass("treegrid-hide-column") ) {
            $(currentEl).css('border-right', '1px solid #bfbfbf');
            return;
          }
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

如此简单的使用nth-last-child() here

<script>
    $(document).ready(function(){
       $( 'table tbody tr td:nth-last-child(2)').css('border-right', '1px solid #bfbfbf'); 
    });
</script>

Jsfiddle

Answer 4

如果您向首选的td添加了一个课程？

<table>
<tbody>
    <tr>
        <td>1</td>
        <td class="right-border">2</td>
        <td class="treegrid-hide-column">3</td>
    </tr>
    <tr>
        <td>4</td>
        <td class="right-border">5</td>
        <td class="treegrid-hide-column">6</td>
    </tr>
    <tr>
        <td>7</td>
        <td class="right-border">8</td>
        <td class="treegrid-hide-column">9</td>
    </tr>
</tbody>

然后更改css

.right-border {
      border-right: 1px solid #bfbfbf;
}

或使用js函数

function addRightBorderOnTreetable() {
    var el = $('.treegridCustom tbody tr .right-border');
    el.css('border-right', '1px solid #bfbfbf');
}

Answer 5

   table tr td:not(.treegrid-hide-column):last-child {
        border-right: 1px solid #bfbfbf;
    }

Jquery / JS选择每行中没有特定类的最后一个td

5 个答案: