HTML仅显示具有特定值的表数据

Question

我有一个html表，我只想显示那些在特定表头对应的表数据中具有特定值的行。您可以假设就像SQL查询一样，例如

select * from mytable where name="jone";

代码：

＆＃13;

＆＃13;

$("#datatable").find("td").each(function() {
  var test = $(this).text();
  alert(test);
});

＆＃13;

		<div class="x_content">
                    <table id="datatable" class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>Position</th>
                          <th>Office</th>
                          <th>Age</th>
                          <th>Start date</th>
                          <th>Salary</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Tiger Nixon</td>
                          <td>System Architect</td>
                          <td>Edinburgh</td>
                          <td>61</td>
                          <td>2011/04/25</td>
                          <td>$320,800</td>
                        </tr>
                        <tr>
                          <td>Garrett Winters</td>
                          <td>Accountant</td>
                          <td>Tokyo</td>
                          <td>63</td>
                          <td>2011/07/25</td>
                          <td>$170,750</td>
                        </tr>
                        </tbody>
					</table>
			</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

使用:contains选择器选择具有指定内容的元素

＆＃13;

＆＃13;

$("#datatable tbody tr").hide();
$("#datatable tr:contains('Edinburgh')").show();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="x_content">
  <table id="datatable" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;