Question

jQuery如何使用td标记中的name属性和用户从下拉框中选择的选项值来过滤HTML表中的行？

这是HTML：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h3>filtering table rows</h3>
<label>filter primary</label>
<select>
  <option></option>
  <option>Watertown</option>
  <option>Rockford</option>
  <option>Springfield</option>
  <option>Evansville</option>
</select>
<table>
  <tr>
    <th>ID</th>
    <th>primary</th>
    <th>secondary</th>
    <th>mode</th>
  </tr>
  <tr>
    <td>101</td>
    <td name="primary">Watertown</td>
    <td name="secondary">Rockford</td>
    <td>bus</td>
  </tr>
  <tr>
    <td>102</td>
    <td name="primary">Springfield</td>
    <td name="secondary">Watertown</td>
    <td>car</td>
  </tr>
  <tr>
    <td>103</td>
    <td name="primary">Evansville</td>
    <td name="secondary">Watertown</td>
    <td>bus</td>
  </tr>
</table>
</body>

这是我到目前为止在jQuery上所拥有的：

// attach event to select box
$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').text();

$('td').hide();
$('tr').each(function() {
    $.each(this.cells, function() {
    // need a way to isolate this.cells (td tags) with name attribute equal to "primary" and text within that td tag equal to selectedOption, then hide that table row
  });
});
}

jQuery尚不可用-我一直在研究如何隔离所需的行。

例如，如果用户选择“ Watertown”作为主过滤器，则表格应仅显示1行-在第一栏中显示“ Watertown”的行。

Answer 1

您必须根据所选值显示表数据

更新我给了<tr id="tableHeading">以显示表格标题

再次更新，删除代码中的<tr id>并添加tr:first-child以显示表格标题

$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').val();
    $('tr').each(function(){
         if($(this).find('td[name=primary]').text() == selectedOption){
            $('tr:first-child').show();
            $(this).show();
         }else{
            $('tr:first-child').show();
            $(this).hide();
         }
      });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option></option>
  <option>Watertown</option>
  <option>Rockford</option>
  <option>Springfield</option>
  <option>Evansville</option>
</select>
<table>
  <tr>
    <th>ID</th>
    <th>primary</th>
    <th>secondary</th>
    <th>mode</th>
  </tr>
  <tr>
    <td>101</td>
    <td name="primary">Watertown</td>
    <td name="secondary">Rockford</td>
    <td>bus</td>
  </tr>
  <tr>
    <td>102</td>
    <td name="primary">Springfield</td>
    <td name="secondary">Watertown</td>
    <td>car</td>
  </tr>
  <tr>
    <td>103</td>
    <td name="primary">Evansville</td>
    <td name="secondary">Watertown</td>
    <td>bus</td>
  </tr>
</table>

Answer 2

您需要检查表td值是否与所选选项匹配，如果匹配，则显示该值。这是您可以做的。

$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').text();

$('tr').hide();
$('tr:first').show();
$('table tr').each(function() {
    if($(this).find('[name=primary]').text() == selectedOption){
      $(this).show();
    }
});
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h3>filtering table rows</h3>
<label>filter primary</label>
<select>
  <option></option>
  <option>Watertown</option>
  <option>Rockford</option>
  <option>Springfield</option>
  <option>Evansville</option>
</select>
<table>
  <tr>
    <th>ID</th>
    <th>primary</th>
    <th>secondary</th>
    <th>mode</th>
  </tr>
  <tr>
    <td>101</td>
    <td name="primary">Watertown</td>
    <td name="secondary">Rockford</td>
    <td>bus</td>
  </tr>
  <tr>
    <td>102</td>
    <td name="primary">Springfield</td>
    <td name="secondary">Watertown</td>
    <td>car</td>
  </tr>
  <tr>
    <td>103</td>
    <td name="primary">Evansville</td>
    <td name="secondary">Watertown</td>
    <td>bus</td>
  </tr>
</table>
</body>

Answer 3

感谢Vpa的帖子，这是我得到的最终代码：

// attach event to select box
$('select').on('change', filter);

// filter function
function filter() {
    var selectedOption = $('select').find(':selected').text();

    if (selectedOption) {
    $('tr').hide();
  $('tr').each(function() {
    if($(this).find('[name=primary]').text() == selectedOption) {
    $(this).show();
    }
  });
  $('tr:first').show();
  } else {
    $('tr').show();
  }
}

此版本始终显示表标题行。另外，如果用户选择空白选项，则会显示所有表行。

根据表详细信息名称和文本过滤表行

3 个答案: