Question

我必须根据特定列的值过滤表格中的数据。这是我的桌子

我想根据最后一栏＆＃34; STATUS＆＃34;过滤此表。显示学生是否经过验证。我必须在按钮的点击事件上执行此操作。这是我的按钮

我想点击这个＆＃34;经过验证的学生＆＃34;按钮，该表只显示已验证学生的列表并隐藏未经验证的学生。请帮助我有点困惑。

＆＃13;

<table id="Skilllist" class="table  table-striped table-bordered ">
  <thead class="text-center">
    <tr>
      <th>
        <input type="checkbox" class="allchk1" id="allchk" />
      </th>
      <th>S.NO.</th>
      <th>CAMPUS</th>
      <th>ROLL NO.</th>
      <th>NAME</th>
      <th>Gender</th>
      <th>EMAIL ID</th>
      <th>CGPA</th>
      <th>PS Type</th>
      <th>Batch</th>
      <th>STATUS</th>
    </tr>
  </thead>
  <tbody id="Studentlistdata">
  </tbody>
</table>

<div style="display: none">
  <table>
    <tbody>
      <tr id="Studentlist1">
        <td>
          <input type="checkbox" class="Allchk" chk="chk" id="Chek1" />
        </td>
        <td id="Srno" class="ver unver"></td>
        <td id="Campus" class="ver unver"></td>
        <td id="RollNo" class="rollnumber ver unver"></td>
        <td id="Name" class="ver unver"></td>
        <td id="disc" class="ver unver"></td>
        <td id="email" class="ver unver"></td>
        <td id="Cgpa" class="ver unver"></td>
        <td id="pstype" class="ver unver"></td>
        <td id="batchname" class="ver unver"></td>
        <td id="sta" class="ver unver">
          <label id="sta1" class="label label-default">Not Verified</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

您可以使用此方法过滤它：

hide()所有tr在tbody中找到（在名为stud_body的演示案例中），下一个show() rows中包含指定的所有项目状态，rows.filter(":contains('yourStatus')").show()

$("#searchButton").click(function () {
    var rows = $("#stud_body").find("tr").hide();
    rows.filter(":contains('OK')").show();
 });

演示：http://jsfiddle.net/w6mvoo7a/

Answer 2

在创建商家信息时为您的行添加一个类。

 <tr id="Studentlist1" class="ver">   //FOR VERIFIED
 <tr id="Studentlist1" class="nver">  //FOR NOT VERIFIED

THEN 当您单击按钮时，使用jquery为您的表添加一个类，例如“show-verified”。

$( "#clicked_buttonName" ).click(function() {
  $(".yourTable").addClass("show-verified");
});

然后写一个像

这样的CSS

.show-verified .nver{display:hidden}

它会使您的未经验证的课程不可见

如何使用jquery过滤按钮单击表中的数据

2 个答案: