【发布时间】：2019-02-07 05:34:41
【问题描述】：
我有一个包含 JSON 数据的 HTML 表，我正在尝试使用搜索输入字段来搜索我的 html 表数据。
我只想搜索表格的 tbody 元素而不是thead，但在我的代码中它不起作用。
我在我的代码中提供了一个 filterdata 类，正文代码从该类开始但搜索不起作用。
这是我的代码：
片段
$(document).ready(function() {
var tableValue = [{
"Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
"User Name": "admin",
"User LoginId": "admin",
"User Password": "admin",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
"User Name": "maiyas",
"User LoginId": "maiyas",
"User Password": "maiyas",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "CHEF BAKERS",
"User Name": "cbadmin",
"User LoginId": "cbadmin",
"User Password": "cbadmin",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "CHEF BAKERS",
"User Name": "cbaker",
"User LoginId": "cbaker",
"User Password": "cbaker",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
"User Name": "jayanagar",
"User LoginId": "jayanagar",
"User Password": "jayanagar",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
"User Name": "malleswaram",
"User LoginId": "malleswaram",
"User Password": "malleswaram",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
"User Name": "kolar",
"User LoginId": "kolar",
"User Password": "kolar",
"User role": "DISTRIBUTOR",
"Active": "Y"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) { //this one to make thead
var th = document.createElement("th");
th.innerHTML = col[i];
tr.classList.add("text-center");
tr.appendChild(th);
}
for (var i = 0; i < tableValue.length; i++) { // thid one to make tbody
tr = table.insertRow(-1);
tr.classList.add("filterData"); //hear i am adding the class in body
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata);
tabCell.classList.add("text-right");
}
tabCell.innerHTML = tabledata;
}
var divContainer = document.getElementById("mrpl");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
}
addTable(tableValue)
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".filterData tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<input id="myInput" type="text" placeholder="Search..">
<div id="mrpl"></div>我会采取正确的方法，但我不知道我做错了什么。
注意：由于某些原因，我不能使用dataTables。
【问题讨论】：
标签： javascript jquery