Поиск в реальном времени в строках таблицы с помощью rowspan

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть таблица, которая содержит интервалы строк в первом столбце. У меня есть код, но когда я ищу его, он рушится. Моя таблица выглядит примерно так: Таблица.

 $("#search").on("keyup", function () {
  var value = $(this).val();

  $("table tr").each(function (index) {
    if (index !== 0) {

      $row = $(this);

      var id = $row.find("td:first").text();

      if (id.indexOf(value) !== 0) {
        $row.hide();
      }
      else {
        $row.show();
      }
    }
  });
});

 td {
  border: 1px solid gray;
  padding: 4px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>XY</th>
    <th>ZW</th>
  </tr>
  <tr>
    <td rowspan="2">321</td>
    <td>242</td>
  </tr>
  <tr>
    <td>513256</td>
  </tr>
  <tr>
    <td>33131</td>
    <td>13</td>
  </tr>
  <tr>
    <td>4131</td>
    <td>334132</td>
  </tr>
  <tr>
    <td rowspan="3">51311</td>
    <td>54424</td>
  </tr>
  <tr>
    <td>54424</td>
  </tr>
  <tr>
    <td>5442</td>
  </tr>
  <tr>
    <td>511</td>
    <td>544</td>
  </tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

Развернуть фрагмент

1. используйте ближайший метод jquery, чтобы скрыть родительский «tr»

2. Входной тег не имеет конечного тега. Удалить </input> .

3. @AyazAlavi теперь я использую: if (id.indexOf(value) !== 0) {$row.closest(‘tr’).hide();} но ничего не меняется, это все равно неправильно.

4. позвольте мне написать пример кода, дайте мне минутку

Ответ №1:

взгляните на jsfiddle [здесь][1]

  $("#search").on("keyup", function() {
        $("td").closest("tr").hide()
    var value = $(this).val();
    if (value) {
        $("td:contains('" value "')").closest("tr").show()
    } 
    else {
        $("td").closest("tr").show()
    }
});

Обновленный код, учитывающий диапазон строк:
https://jsfiddle.net/nbys6fqm /
[1]: https://jsfiddle.net/c6nopaes /

1. Это все еще неправильно. Попробуйте запустить код, для меня это все еще неправильно.

2. @AyazAlavi Я хотел бы уточнить, когда я ищу строку rowspan, я хотел бы видеть каждую строку, например, когда rowspan =»2″ я хотел бы видеть 2 tr, когда rowspan =»1″ я хотел бы видеть tr, когда rowspan =»34″ я быхотелось бы увидеть 34 tr.

3. вам нужно проанализировать атрибут rowspan и выполнить перемотку вперед, чтобы отобразить их все.

4. Хорошая попытка! Но в вашем jsfiddle-script все еще есть логический недостаток: вы проверяете только <td> то, что соответствует шаблону поиска для rowspan атрибута. Так, например, при поиске 256 вы не получите желаемого результата.

Ответ №2:

Следующее должно сделать свое дело. Я надеюсь, что это все еще кому-то полезно:

 $("#search").focus().on("keyup", function () {
  var value = $(this).val();
  var trs=$("table tr:nth-child(n 2)");
  for (let i=0;i<trs.length;){
    let grp=$(trs.slice(i,i =trs[i].children[0].rowSpan));
    $(grp).toggle( !!$('td:contains(' value ')', grp).length );
  }
});

 td {
  border: 1px solid gray;
  padding: 4px;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>XY</th>
    <th>ZW</th>
  </tr>
  <tr>
    <td rowspan="2">321</td>
    <td>242</td>
  </tr>
  <tr>
    <td>513256</td>
  </tr>
  <tr>
    <td>33131</td>
    <td>13</td>
  </tr>
  <tr>
    <td>4131</td>
    <td>334132</td>
  </tr>
  <tr>
    <td rowspan="3">51311</td>
    <td>54424</td>
  </tr>
  <tr>
    <td>54424</td>
  </tr>
  <tr>
    <td>5442</td>
  </tr>
  <tr>
    <td>511</td>
    <td>544</td>
  </tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"s></input>

Развернуть фрагмент

Действие происходит в этих строках:

 var trs=$("table tr:nth-child(n 2)");

Объект jQuery trs содержит все записи таблицы ниже строки заголовка. В цикле
for (let i=0;i<trs.length;){...} они <tr> будут сгруппированы в соответствии с содержимым rowspan атрибута первого <td> в каждой записи trs[i] :

 let grp=$(trs.slice(i,i =trs[i].children[0].rowSpan));

Эта вновь созданная группа теперь toggle() является -d (т. е. Отображается или скрыта) на основе
!!$('td:contains(' value ')' (—> это выражение возвращает логическое значение).

 $(grp).toggle( !!$('td:contains(' value ')', grp).length );