正文

学会用jQuery轻松控制下拉框与表格联动，实现数据筛选与展示

/0 浏览量
0413

在现代Web开发中，下拉框与表格联动是一个常见的需求，它可以大大提高用户数据的筛选和展示效率。jQuery作为一款优秀的JavaScript库，使得这一功能变得简单易行。下面，我将详细讲解如何使用jQuery来实现下拉框与表格的联动，实现数据的筛选与展示。

1. 准备工作

在开始之前，请确保你已经引入了jQuery库。以下是jQuery的CDN链接，你可以将其添加到你的HTML文件中：

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

2. 创建下拉框和表格

首先，我们需要在HTML中创建一个下拉框和一个表格。以下是示例代码：

<select id="mySelect">
  <option value="all">全部</option>
  <option value="1">类别1</option>
  <option value="2">类别2</option>
  <option value="3">类别3</option>
</select>

<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>类别</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
  </tbody>
</table>

3. 添加表格数据

接下来，我们需要为表格添加一些数据。这里我们使用JavaScript来动态添加数据：

var tableData = [
  { name: '商品1', price: '100', category: '1' },
  { name: '商品2', price: '200', category: '2' },
  { name: '商品3', price: '300', category: '3' }
];

$('#myTable tbody').empty();
$.each(tableData, function(i, item) {
  var row = '<tr>' +
    '<td>' + item.name + '</td>' +
    '<td>' + item.price + '</td>' +
    '<td>' + item.category + '</td>' +
    '</tr>';
  $('#myTable tbody').append(row);
});

4. 实现联动效果

现在我们来编写jQuery代码，实现下拉框与表格的联动。以下是核心代码：

$('#mySelect').change(function() {
  var selectedValue = $(this).val();
  $('#myTable tbody tr').hide();
  if (selectedValue === 'all') {
    $('#myTable tbody tr').show();
  } else {
    $('#myTable tbody tr').each(function() {
      if ($(this).find('td:last').text() === selectedValue) {
        $(this).show();
      }
    });
  }
});

在这段代码中，我们监听下拉框的change事件。当下拉框的值发生变化时，我们首先隐藏所有表格行，然后根据下拉框的值来筛选显示相应的行。

5. 测试效果

保存上述代码，并在浏览器中打开HTML文件。你可以看到，当你在下拉框中选择不同的类别时，表格中的数据会根据选择自动筛选和展示。

6. 总结

通过以上步骤，我们成功地使用jQuery实现了下拉框与表格的联动，并实现了数据的筛选与展示。这个方法简单易行，适用于各种场景。希望这篇文章能帮助你更好地掌握这一技术。

-- 展开阅读全文 --