As already indicated in the title, I want to add a bottom border on the row only if the date in the row IS DIFFERENT from the row below.
Below is my code; as you can see I added the condition in the tr but it is not working for me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.js"></script>
</head>
<style>
tr.border_bottom td {
border-bottom: 3px solid black;
}
</style>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Category</th>
</tr>
</thead>
<tbody>
@foreach($announcements as $key=>$announcement)
<tr class="@if($announcements[$key]->date != $announcements[$key+1]->date) border_bottom @endif">
<td>{{$announcement->title}}</td>
<td>{{$announcement->date}}</td>
<td>{{$announcement->category->name}}</td>
</tr>
@endforeach
</tbody>
</table>
</body>
<script>
let table = new DataTable('#myTable', {
order: [
[1, 'asc']
]
});
</script>
</html>PS: See the code below to understand!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.js"></script>
</head>
<style>
tr.border_bottom td {
border-bottom: 3px solid black;
}
</style>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>Lamborghini Urus</td>
<td>2024-08-01</td>
<td>Motori</td>
</tr><tr class="">
<td>CONSOLE SONY PLAYSTATION 5 STANDARD EDITION + GOD OF WAR RAGNAROCK VCH EU</td>
<td>2024-08-01</td>
<td>Motori</td>
</tr><tr class="">
<td>Kawasaki Ninja H2 SX SE</td>
<td>2024-08-11</td>
<td>Motori</td>
</tr><tr class="">
<td>HP ZBook Fury 17 G7 119W4-D3 17,3" UHD 4K DC i9-10885H 128 GB 2x2 TB RTX3000 W10P</td>
<td>2024-08-15</td>
<td>Libri</td>
</tr></tbody>
</table>
</body>
<script>
let table = new DataTable('#myTable', {
order: [
[1, 'asc']
]
});
</script>
</html>Suppose we have the table produced by the following code; what I want is insert:
- a border bottom on the second row (since 2024-08-01 is different from 2024-08-11),
- a border bottom on the third row (since 2024-08-11 is different from 2024-08-15).
Can someone help me do this please?