javascript - 为什么 jQuery 过滤器功能不能通过表体和行工作?
问题描述
我正在尝试搜索用 JS 和 jQuery 制作的地址簿,并尝试了大多数可用的模式选项来通过搜索的 ready() 过滤 tbody 和 tr,但它不起作用,请你看看并让我知道我在哪里我错了。下面是我的 html 和 JS 代码,我在 repl.it 工作 谢谢。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>Address Book</h1>
<hr />
</header>
<table id='table1' class="table">
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>
<input id='firstName' class='form-control' type="text" placeholder ='Name'>
</td>
<td>
<input id='lastName' class='form-control' type="text" placeholder ='Surname'>
</td>
<td>
<input id='phone' class='form-control' type="text" placeholder ='Contact Number'>
</td>
<td>
<input id='address' class='form-control' type="text" placeholder ='Full Postal Address'>
</td>
<td>
<div class="text-center">
<button id='add' class='btn btn-block' >Add</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
JS代码
var adBook = (function () {
// default fields for understanding
var pplDetails = [{
firstName: 'Sam',
lastName: 'Smith',
phone: '004477995544',
address: '33 jump st, London'
}];
//variables declaration
var table = $('#table1');
var $tbody = table.find('tbody');
var $firstName = table.find('#firstName');
var $lastName = table.find('#lastName');
var $phone = table.find('#phone');
var $address = table.find('#address');
var $button = table.find('#add');
var $btnRemove = table.find('#remove');
var $input = table.find(".edit");
//events calls
$button.on('click', adPerson);
table.on('click', '#remove', delPerson);
console.log($input);
build();
//function to create new table data
function build() {
$tbody.html('');
var length = pplDetails.length;
for (var i = 0; i < length; i++) {
table.prepend('<tr><td><input type="text" value="' + pplDetails[i].firstName + '" ></td> <td><input type="text" value="' + pplDetails[i].lastName + '" ></td> <td><input type="text" value="' + pplDetails[i].phone + '" ></td> <td><input type="text" value="' + pplDetails[i].address + '" ></td> <td> <button id="remove" class="btn btn-block">Del</button></td></tr>');
}
}
//function to add persons details
function adPerson() {
var data = {
firstName: $firstName.val(),
lastName: $lastName.val(),
phone: $phone.val(),
address: $address.val()
};
pplDetails.push(data);
$firstName.val('');
$lastName.val('');
$phone.val('');
build()
}
//function to delete details
function delPerson(event) {
var element = event.target.closest('tr');
var i = table.find('td').index(element);
pplDetails.splice(i, 1);
build();
}
return {
adPerson: adPerson,
delPerson: delPerson
};
})();
//Search bar
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$('tbody tr').filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
解决方案
在您的代码中看到了一些问题。palasH 指出的第一件事是 HTML 中有两个 jquery 包含,如下所示。
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
和
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
您的tbody
标签为空,如下所示。
<tbody>
</tbody>
整个表格内容 - 即tr
行在tfoot
标签内。因此$('tbody tr').filter()
将失败,因为它无法tr
在tbody
标签中找到。
请更正上述内容并检查。
推荐阅读
- python - 有没有办法用列名、第一列中的行值和值本身替换数据框中的每个单元格值?
- ruby-on-rails - Rails ActionText 不呈现文本输入框和上传附件的样式
- c - 在c中将结构添加到双向链表中
- linux - 使用 yocto 在 Raspberry Pi 3 上启动时启动 Electron 应用程序
- r - 如何使用 R 计算 FRR 和 FAR 分数
- apache-camel - Apache Camel 路由超时
- ansible - 在 Ansible Tower textare 调查中使用字典变量列表
- python - list_2 Python 中发生了什么?
- ios - Firebase 在 30 分钟内没有变化的情况下,多次附加和分离 SnapshotListener 是否需要花费?
- reactjs - 赛普拉斯 e2e 测试不使用等待功能