What i'm trying to do is match what the db is giving me in my table results, then turning a list group link green, to mark it as completed. So when the entry from the DB populates the listing table below with Module Textbook, that would match and then the javascript would then see that listing and color the tag. If the list group item is not in the list returned from the DB, then nothing would happen.
SO my example:
@if (count($listings))
<table class="table table-vcenter card-table table-striped">
<thead>
<tr>
<th style="font-size: 11px; font-family: 'Helvetica Neue', sans-serif">Module</th>
</tr>
</thead>
<tbody>
@foreach($listings as $listing)
<tr>
<td>{{$listing->module}} </span></td>
</tr>
@endforeach
</tbody>
</table>
@endif
Then in my list group of links:
<div class="card-header">
<h3 class="card-title" style="font-size: 22px">Module</h3>
</div>
<div class="list-group list-group-flush list-group-hoverable">
<div class="list-group-item second-table">
<div class="row align-items-center">
<div class="col text-truncate">
<span class="module"><a href="#" class="text-reset d-block">Module Textbook</a></span
</div>
<div class="col-auto">
</div>
</div>
</div>
I trying to turn the link state or the block or cell in the list group a color if it shows up in the the top table td tag.
So if Module Textbook shows up in the table on top, in the td tag, the the javascript would see it, got to the list-group of links, match the name and turn the link or the block or cell a color.
My script that doesn't seem to be turning the cell or block a color. Have tried using the a tag and that didn't work either.
let listings = [];
document.querySelectorAll('.listings td')
.forEach(element => listings.push(element.innerText));
console.log(listings);
document.querySelectorAll('.module span')
.forEach(function (el) {
if (listings.includes(el.innerText)) {
el.style.background = 'rgb(60, 118, 61, 0.3)';
}
});
Is this doable? Thanks for any help!