Используйте jQuery для поиска значения в Таблице Bootstrap 4 внутри коллапса - PullRequest
Новая
       34

Используйте jQuery для поиска значения в Таблице Bootstrap 4 внутри коллапса

0 голосов
/ 30 октября 2019

Я использую таблицу 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>

1 Ответ

1 голос
/ 30 октября 2019

Вы можете попробовать следующий скрипт: 

$('.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>');
    }
  });
});
...