使用 jQuery 在折叠内部搜索 Bootstrap 4 表中的值

Question

我在折叠中使用Bootstrap 4表，我想在表中搜索一个值，如果找到了该值，请打开折叠并显示具有该值的行。

<div id="collapseStudents" class="collapse ml-4" aria-labelledby="headingOne" data-parent="#accordionTypes">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col" class="text border-bottom">N.</th>
<th scope="col" class="text border-bottom">Classe</th>
<th scope="col" class="text border-bottom">Nome e Cognome</th>
<th scope="col" class="text border-bottom">Ruoli</th>
</tr>
</thead>
<tbody>
{% for number, data in students_table.items() %}
<tr>
<th scope="row" class="text">{{number}}</th>
<td class="text"><span class="badge badge-secondary">{{data['class']}}</span></td>
<td class="text">{{data['name']}}</td>
<td class="text roles" style="width: 30%">
<span class="badge badge-danger align-text-top ml-1 admin-chip" style="display: {{none if not 'admin' in data['roles'] else block}}; position: relative; top: 2px;">Admin <a class="text-light chip" href=""><i class="fa fa-times" aria-hidden="true" style="position:relative;top:0.3px" data-role="admin" data-user="{{data['name'] + '-' +number}}"></i></a></span>
</td>
</tr>
{% endfor %}
</tbody>
</table>

Answer 1

您可以尝试使用以下脚本：

$('.table tbody').find('tr').each(function(){
$(this).find('td').each(function(){
if($(this:contains('valueToSearch'))){
$('#collapseStudents').collapse();
// here you can set how to show the row, ex. as bold text
$(this).text('<b>' + $(this).text() + '</b>');
}
});
});