Question

我有包含名称，地址，状态等数据的表。在状态列中，它包含显示在下拉列表中的已发布或未发布的值。当我从下拉列表中选择发出时，它将显示已颁发在该特定列值中。表格如下所示：

<table>
  <tr>
    <td>Name</td>
    <td>Address</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>vb</td>
    <td>30</td>
    <td>vbbvvb</td>
    <td><select><option>Issued</option><option>Not Issued</option></select></td>
  </tr>
  <tr>
    <td>dfddf</td>
    <td>fggffg</td>
    <td><select><option>Issued</option><option>Not Issued</option></select></td>
  </tr>
  <tr>
    <td>dddfd</td>
    <td>ghhg</td>
    <td><select><option>Issued</option><option>Not Issued</option></select></td>
  </tr>
</table>

在上表中，我想根据状态列过滤所有数据，即。已发布但未发布。如果我从下拉列表中选择值为Issued，则表中应显示已发布的行。

选择框如下所示：

<select name="status">
   <option value="">All</option>
   <option value="Issued">issued</option>
   <option value="Not Issued">Not issued</option>
</select>

有人可以提出解决方案吗？

我将在下面显示我的表格的示例页面。

Page

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="status" id="statusSearch">
  <option value="">All</option>
  <option value="Issued">issued</option>
  <option value="Not Issued">Not issued</option>
</select>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="tableId">
    <tr>
      <td>vb</td>
      <td>30</td>
      <td>
        <select>
          <option>Issued</option>
          <option>Not Issued</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>dfddf</td>
      <td>fggffg</td>
      <td>
        <select>
          <option>Issued</option>
          <option selected="">Not Issued</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>dddfd</td>
      <td>ghhg</td>
      <td>
        <select>
          <option>Issued</option>
          <option>Not Issued</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
$("#statusSearch").change(function() {
  searchTable($(this).val(), '#tableId');
});

function searchTable(inputVal, tableId) {
  $(tableId + ' tr').each(function() {
    var allCells = $(this).find('select');
    var found = false;
    if (inputVal == '') {
      found = true;
    } else {
      if ($(allCells).find('option:selected').text() == inputVal) {
        found = true;
      }
    }
    if (found == true) $(this).show();
    else $(this).hide();
  });
}
</script>

如何使用jquery中的特定字段名称过滤表格？

1 个答案: