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');
}
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With