Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery/JS Select last td in each line which don't have a specific class

I have the following HTML table:

<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>

I would like to get all last elements which don't have the "treegrid-hide-column" class in each line.

How can in do that in CSS or JS ?

I tried doing that but it doesn't works well.

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');
        }
    }
}
like image 715
wawanopoulos Avatar asked Nov 23 '25 22:11

wawanopoulos


1 Answers

CSS doesn't have this feature, but you can do it with 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>

We have to go row-by-row because there's no CSS "last element not matching this class", and jQuery's :last applies to the whole set, not the set at each level of thes elector.

like image 177
T.J. Crowder Avatar answered Nov 25 '25 11:11

T.J. Crowder