Показать / скрыть и найти строки в таблице

У меня есть таблица, в которой я ищу (показывать / скрывать строки) с помощью плагина quicksearch jQuery. В той же таблице я должен показать / скрыть все строки, где установлен флажок (первый столбец в таблице), если пользователь нажимает кнопку переключения строки (кнопка находится за пределами таблицы). Когда я ищу данные в таблице, скрытые строки (установлен флажок) становятся видимыми. Как я могу достичь обеих функций.

Где все скрытые строки (где установлен флажок и пользователь щелкнул «переключить строки») останутся скрытыми при поиске пользователем данных в таблице и наоборот.

Ниже приводится мой jQuery:

$(function () {
    $('input#gridSearch').quicksearch('#<%=gvActivities.ClientID %> tbody tr');

    $('.showhiderows').click(function () {
        $('#<%=gvActivities.ClientID %>').find("input[type=checkbox]:checked").closest('tr').toggle();
    });
});

Флажок - это первый столбец в GridView.

Кнопка для отображения / скрытия выбранных строк:

<input type="button" id="btnShowHide" class="showhiderows"  value="Toggle Selected Rows" />

Структура таблицы, только заголовок и первая строка:

<table class="gvv1" id="MainContent_gvActivities">
  <tr style="background-color: buttonface;">
      <th scope="col">
          &nbsp;
      </th>
      <th scope="col">
          Cluster
      </th>
      <th scope="col">
          Activity
      </th>
      <th scope="col">
          Data
      </th>
      <th scope="col">
          Target
      </th>
      <th scope="col">
          Achieved
      </th>
  </tr>
  <tr>
      <td>
          <input id="longIdGeneratedByCode" type="checkbox"/>
      </td>
      <td style="width: 50px;">
          ER.
      </td>
      <td style="width: 250px;">
          Establishment
      </td>
      <td style="width: 460px;">
          Number of
      </td>
      <td style="width: 70px;">
          Text
      </td>
      <td style="width: 70px;">
          Text2
      </td>
  </tr>
</table>

javascript gridview jquery jquery-callback
person Kashif    schedule 10.02.2013    source источник
comment
Предоставьте код таблицы, который также содержит флажок.   -  person Javier Brooklyn    schedule 10.02.2013

Ответы (1)


arrow_upward
2
arrow_downward

Думаю, я смогу это решить,

$("#showhidetr").on("click", function(){
  if($(this).is(':checked')){
    $("#myTable").find("input[type='checkbox']").each(function(){
      if($(this).is(':checked')){
        $(this).parent().parent().hide();
      }
    })
  } else {
    $("#myTable").find("input[type='checkbox']").each(function(){
      if($(this).is(':checked')){
        $(this).parent().parent().show();
      }
    })
  }
})

<input type='checkbox' id="showhidetr">
<table id="myTable">
  <tr>
   <td><input type='checkbox'></td>
   <td>Mary</td>
  </tr>
  <tr>
    <td><input type='checkbox'></td>
    <td>John</td>
  </tr>
  <tr>
    <td><input type='checkbox'></td>
    <td>Michael</td>
  </tr>
</table>

Когда вы устанавливаете флажок showhidetr, сценарий ищет отмеченный флажок в таблице и скрывает его tr.

person Eric Martins    schedule 10.02.2013