在js中的表中搜索不起作用
Search is not working in table in js
我有一个表。我想根据输入值过滤表中的值。但是当前该表没有进行过滤。我使用onkeyup函数进行过滤。jsfiddle链接如下。
function filterTable() {
var q = document.getElementById("tabFilter");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var on = 0;
for ( var i = 0; i < rows.length; i++ ) {
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
if ( fullname ) {
if ( v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1 ) ) {
rows[i].style.display = "";
on++;
} else {
rows[i].style.display = "none";
}
}
}
var n = document.getElementById("noresults");
if ( on == 0 && n ) {
n.style.display = "";
document.getElementById("qt").innerHTML = q.value;
} else {
n.style.display = "none";
}
}
jsfiddle
- 使用
textContent
而不是innerHTML
,因为innerHTML
也将选择HTMLElement
- 使用
index
作为2,而不是在第0
个索引处,没有要筛选的name
列 - 同时添加
fullname &&
条件 - 在读取
index
元素之前放置if (fullname.length) {
条件
var obj = [{
Firstname: "Bob",
Lastname: "Mayer",
Email: "bob@mayer.com",
Number: "123456789"
}, {
Firstname: "Steven",
Lastname: "Spil",
Email: "steven@spill.com",
Number: "987654321"
}, {
Firstname: "Paul",
Lastname: "Taucker",
Email: "paul@tack.com",
Number: "578954321"
}, {
Firstname: "computer",
Lastname: "Tech",
Email: "comp@tech.com",
Number: "418741876"
}, {
Firstname: "User",
Lastname: "Interface",
Email: "user@inter.in",
Number: "949796928"
}];
var editCounter = 0;
var table = document.createElement('table');
table.id = "table";
var headcell = document.createElement('th');
var cell = document.createElement('td');
var input = document.createElement('input');
var tableContainer = document.createElement('div');
document.body.appendChild(tableContainer);
var filter = document.createElement('input');
filter.type = "text";
filter.placeholder = "Filter";
filter.id = "tabFilter";
filter.setAttribute("onkeyup", "filterTable()");
tableContainer.appendChild(filter);
var formContainer = document.createElement('form');
formContainer.id = "details";
document.body.appendChild(formContainer);
function createTable() {
tableContainer.appendChild(table);
var row = document.createElement('tr');
table.appendChild(row);
headcell = document.createElement('th');
row.appendChild(headcell);
headcell.innerHTML = "Select";
headcell = document.createElement('th');
row.appendChild(headcell);
headcell.innerHTML = "Sl.No";
Object.keys(obj[0]).forEach(function(val) {
headcell = document.createElement('th');
row.appendChild(headcell);
headcell.innerHTML = val;
});
for (var i = 0; i < obj.length; i++) {
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnEdit = document.createElement('input');
btnEdit.type = "button";
btnEdit.value = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkBox";
var row = document.createElement("tr");
table.appendChild(row);
var cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(checkbox);
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = i;
for (key in obj[i]) {
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = obj[i][key];
}
}
return true;
}
createTable();
function filterTable() {
var q = document.getElementById("tabFilter");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var on = 0;
for (var i = 0; i < rows.length; i++) {
var fullname = rows[i].getElementsByTagName("td");
if (fullname.length) {
fullname = fullname[2].textContent.toLowerCase();
if (fullname && v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) {
rows[i].style.display = "";
on++;
} else {
rows[i].style.display = "none";
}
}
}
}
* {
font-family: 'verdana'
}
table {
margin-bottom: 15px
}
input {
margin: 5px
}
th,
td {
border: 1px solid #ccc;
font: 13px'verdana';
padding: 5px
}
th {
font-weight: bold
}
table [type="text"],
table [type="email"],
table [type="number"] {
display: block;
width: 90px
}
[value="Delete"],
[value="Copy"] {
display: block
}
相关文章:
- jQuery Datatables:单个列搜索不起作用
- 搜索按钮谷歌地图在我的vf页面上不起作用
- Angular UI Select2指令搜索功能不起作用
- jQuery .focus() 在 Safari(桌面)的搜索字段中不起作用
- 在js中的表中搜索不起作用
- AngularJS搜索没有'不起作用
- 在引导选择组件中的搜索不起作用,其中数据令牌包含所有数字;4730”;
- JQuery UI 地图搜索不起作用
- 谷歌地图地点搜索框不起作用
- 搜索按钮不起作用
- jQuery搜索和替换不起作用(Wordpress)
- 不区分大小写的字符串搜索不起作用
- 引导表分页和搜索不起作用
- ajax实时建议搜索不起作用
- jQuery mobile折叠列表视图,搜索不起作用
- Angular在ng-repeat中的搜索不起作用
- 实时搜索不起作用
- 选择2 4.0 JSON搜索不起作用
- JS,在数组中搜索不起作用
- 为什么我的即时搜索不起作用