Я пытался проверить, работает ли мой JQuery, изменяя цвет выбранной строки. Я стремлюсь получить данные из базы данных, использовать для l oop, чтобы закрепить данные в таблице, а затем выбрать каждый по отдельности с моим кодом; всякий раз, когда я нажимаю на строки, они не выделяются, что означает, что скрипт не работает, мой код выглядит следующим образом:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
#HighLight {
border-collapse: collapse;
text-align: center;
width: 100%;
}
#HighLight tr:hover {
background-color: rgba(0, 0, 0, 0.4);
}
tr {
cursor: pointer
}
th {
background-color: #000;
color: #fff;
border: 1px solid #fff !important;
cursor: default;
}
td,
th {
padding: 5px;
border: 1px solid black;
white-space: nowrap;
vertical-align: text-top;
overflow-x: auto;
max-width: 250px;
max-height: 25px;
}
.selected {
background-color: rgba(0, 0, 0, 0.4) !important;
color: #fff !important;
}
</style>
</head>
<body>
<script>
$("#HighLight tr").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
<table class="Tab" id="HighLight">
<tr>
<th class="cell">ID</th>
<th class="cell">Number</th>
<th class="cell">Data1</th>
<th class="cell">Data2</th>
<th class="cell">Data3</th>
<th class="cell">Data4</th>
<th class="cell">Data5</th>
<th class="cell">Data6</th>
<tbody>
@foreach ($all_users as $a)
<tr>
<td>{{ $a->ID }}</td>
<td>{{ $a->Number }}</td>
<td>{{ $a->DBData1 }}</td>
<td>{{ $a->DBData2 }}</td>
<td>{{ $a->DBData3 }}</td>
<td>{{ $a->DBData4 }}</td>
<td>{{ $a->DBData5 }}</td>
<td>{{ $a->DBData6 }}</td>
</tr>
@endforeach
</tbody>
</table>
</body>
</html>