<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <!-- 数据渲染 --> </tbody> </table> <!-- 弹出层,用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">×</span> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div> </div>给这个页面添加一个搜索信息的功能使用正则查找
时间: 2023-06-26 16:09:52 浏览: 219
好的,可以通过以下代码实现一个搜索联系人的功能:
```html
<!-- 添加搜索框 -->
<div>
<label for="search-input">搜索联系人:</label>
<input type="text" id="search-input">
</div>
<script>
const searchInput = document.getElementById('search-input');
const tableBody = document.querySelector('tbody');
// 监听搜索框输入
searchInput.addEventListener('input', () => {
const searchText = searchInput.value.trim().toLowerCase();
const rows = tableBody.querySelectorAll('tr');
// 遍历每一行联系人信息,使用正则表达式匹配搜索文本
rows.forEach(row => {
const name = row.querySelector('td:nth-child(1)').textContent.toLowerCase();
const phone = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
const email = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
if (name.match(searchText) || phone.match(searchText) || email.match(searchText)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
});
</script>
```
在页面中添加一个输入框和一个表格,然后使用 JavaScript 监听输入框的输入事件,获取搜索文本的值。接着遍历表格中每一行联系人信息,将姓名、电话、邮箱三个字段的文本内容转换为小写字母,并使用 `match` 方法与搜索文本进行匹配。如果匹配成功,则显示该行联系人信息,否则隐藏该行信息。这样就实现了一个基本的联系人搜索功能。
阅读全文
相关推荐




