Проблема с фильтром JavaScript со сворачиваемыми строками в шаблоне Laravel Blade ⇐ Jquery

[Anonymous]

Я относительно новичок в веб-разработке и столкнулся с проблемой в моем js-коде. Я реализовал на своем веб-сайте функцию фильтра с использованием js, но, похоже, она помешала функции свертывания и заставила ее перестать работать должным образом. но функция свертывания снова работает при очистке фильтров. Я просмотрел сайт, у которого могла быть такая же проблема, как и у меня, но я не могу заставить их работать с моим кодом.
вот моя настройка:< /p>

• у меня есть таблица, в которой каждую строку можно свернуть для просмотра дополнительной информации.
• я добавил фильтрацию js для фильтрации строк на основе определенных столбцов.
• фильтр работает нормально, но когда фильтр активен, я не могу открыть свернутые строки, чтобы просмотреть подробности.
• у меня есть приложение .blade.php в каталоге макетов, и я храню там скрипты и стили, которые обычно использую.

Вот мой код:

Код: Выделить всё

@extends('layouts.app')

@section('content')


[i][/i] Hide Filter





[i]








[/i] Filter



[i][/i] Clear Filters








Col 1
Col 2
Col 3
Col 4
Date Time



@foreach($fileData as $fileIndex => $file)

{{ $file['content']['col1'] }}
{{ $file['content']['col2'] }}
{{ $file['content']['col3'] }}
{{ $file['content']['col4']) }}
{{ date('Y-m-d H:i:s', $file['content']['col5']) }}

@if (!empty($file['content']['data']))








[i][/i]  Close





{{ $subKeyIndex }}
{{ count($subKey) }} Record(s)







@endif
@endforeach






document.addEventListener('DOMContentLoaded', function() {

document.getElementById('applyFilters').addEventListener('click', function() {
const col1 = document.getElementById('col1').value.toLowerCase();
const col2 = document.getElementById('col2').value.toLowerCase();
const col3 = document.getElementById('col3').value.toLowerCase();
const col4 = document.getElementById('col4').value;

const topLevelRows = document.querySelectorAll('#tableBody > tr');

topLevelRows.forEach(row => {
const cols = row.getElementsByTagName('td');

const col1Text = cols[0] ? cols[0].innerText.toLowerCase() : '';
const col2Text = cols[1] ? cols[1].innerText.toLowerCase() : '';
const col3Text = cols[2] ? cols[2].innerText.toLowerCase() : '';
const col4Text = cols[4] ? cols[4].innerText.split(' ')[0] : '';

let match = true;
if (col1 && !col1Text.includes(col1)) match = false;
if (col2 && !col2Text.includes(col2)) match = false;
if (col3 && !col3Text.includes(col3)) match = false;
if (col4 && col4Text !== col4) match = false;

if (match) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
});

document.getElementById('clearFilters').addEventListener('click', function() {
document.getElementById('col1').value = '';
document.getElementById('col2').value = '';
document.getElementById('col3').value = '';
document.getElementById('col4').value = '';

const rows = document.querySelectorAll('#tableBody > tr');
rows.forEach(row => row.style.display = '');

});

document.getElementById('toggleFilterForm').addEventListener('click', function() {
const filterForm = document.getElementById('filterForm');
if (filterForm.style.display === 'none') {
filterForm.style.display = 'block';
this.innerHTML = '[i][/i] Hide Filter';
} else {
filterForm.style.display = 'none';
this.innerHTML = '[i][/i] Show Filter';
}
});


@endsection

Я ожидаю, что смогу открывать строки для просмотра их информации, пока фильтр активен, но это не работает

Подробнее здесь: https://stackoverflow.com/questions/785 ... e-template