如何解决添加行后在表中搜索
嗨,出于某种原因,我的搜索栏不会过滤新行,例如,如果我添加了 2 行具有不同名称的行,如果搜索这些名称之一,则不会被过滤。如果你知道代码中的问题对我有很大帮助
let searchInput = document.getElementById("search");
let rows = document.querySelectorAll("tbody tr");
let filter = document.getElementById("filter");
let table = document.getElementById("Table");
let form = document.getElementById("newDonor");
let indexRow = rows.length;
filter.addEventListener("change",function columnIndex(){
let column = filter.value;
searchInput.addEventListener("keyup",function (event) {
let inputText = event.target.value.toLowerCase();
rows.forEach((row) => {
row.querySelectorAll("td")[column].textContent.toLowerCase().includes(inputText)
? (row.style.display = "table-row")
: (row.style.display = "none")
});
});
})
function addDonor(){
let addRow = Table.insertRow();
let dataCol1 = addRow.insertCell();
let dataCol2 = addRow.insertCell();
let dataCol3 = addRow.insertCell();
let dataCol4 = addRow.insertCell();
let dataCol5 = addRow.insertCell();
let dataCol6 = addRow.insertCell();
let dataCol7 = addRow.insertCell();
let dataCol8 = addRow.insertCell();
let dataCol9 = addRow.insertCell();
let dataCol10 = addRow.insertCell();
dataCol1.innerHTML = indexRow + 1;
dataCol2.innerHTML = document.getElementById("name").value;
dataCol3.innerHTML = document.getElementById("name").value;
dataCol4.innerHTML = document.getElementById("name").value;
dataCol5.innerHTML = document.getElementById("name").value;
dataCol6.innerHTML = document.getElementById("name").value;
dataCol7.innerHTML = document.getElementById("name").value;
dataCol8.innerHTML = document.getElementById("name").value;
dataCol9.innerHTML = document.getElementById("name").value;
dataCol10.innerHTML = `<input type="button" value="Editar"></input><input type="button" value="Remover"></input>`
}
form.addEventListener("submit",(e) => {
e.preventDefault();
})
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.Table {
border-collapse: collapse;
margin: 200px auto;
font-family: "Roboto",sans-serif;
font-size: 1em;
min-width: 1000px;
& thead tr {
background-color: #009879;
color: #ffffff;
font-weight: 100;
text-align: left;
}
& tbody tr:hover {
background-color: #f1f1f1;
}
& :is(td,th) {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
}
}
.ac {
text-align: center;
}
.search {
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 190px;
& .filter {
position: relative;
top: 10px;
left: 10px;
& label {
font-family: "Roboto",sans-serif;
}
& select {
border: none;
cursor: pointer;
font-family: "Roboto",sans-serif;
font-size: 15px;
}
& select:focus,select:active {
border: none;
outline: none;
}
}
}
#search {
border: none;
outline: none;
width: 800px;
padding: 10px 0;
font-size: 20px;
border-bottom: 3px solid #009879;
&::placeholder {
font-family: "Roboto",sans-serif;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="tabla.css" />
</head>
<body>
<form onsubmit="addDonor()" id="newDonor" autocomplete="off">
<div>
<label for="name">Name</label>
<input id="name" type="text" name="name" placeholder="Name..." />
</div>
<div>
<input type="submit" name="submit" value="Enviar" />
</div>
</form>
<div class="search">
<input type="text" name="search" id="search" placeholder="Buscar..." />
<div class="filter">
<label for="filter">Sort by: </label>
<select name="filter" id="filter">
<option value="">Select</option>
<option value="0">Number</option>
<option value="1">Name</option>
<option value="2">Age</option>
<option value="3">Gender</option>
<option value="4">Blood Type</option>
<option value="5">Donation</option>
<option value="6">Address</option>
<option value="7">Phone</option>
<option value="8">Date</option>
</select>
</div>
</div>
<table class="Table" id="Table">
<thead>
<tr>
<th>No.</th>
<th>Donor</th>
<th>Age</th>
<th>Gender</th>
<th>Blood type</th>
<th>Donation (lt)</th>
<th>Adress</th>
<th>Phone</th>
<th>Date</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jane Doe</td>
<td class="ac">23</td>
<td class="ac">F</td>
<td class="ac">B+</td>
<td class="ac">2.5</td>
<td>New York</td>
<td class="ac">5556662222</td>
<td class="ac">10/08/2020</td>
<td><input type="button" value="Edit"></input><input type="button" value="Remove"></input></td>
</tr>
<tr>
<td>2</td>
<td>John Doe</td>
<td class="ac">25</td>
<td class="ac">M</td>
<td class="ac">A+</td>
<td class="ac">1.5</td>
<td>New Jersey</td>
<td class="ac">1113334444</td>
<td class="ac">10/09/2020</td>
<td><input type="button" value="Edit"></input><input type="button" value="Remove"></input></td>
</tr>
</tbody>
</table>
<script src="tabla.js"></script>
</body>
</html>
解决方法
尝试使用 jqGrid 进行搜索过滤
我有一个 source,你可以在那里找到它
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"},{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},{id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",total:"210.00"},];
jQuery("#list").jqGrid({
data: mydata,datatype: "local",height: 150,rowNum: 10,rowList: [10,20,30],colNames:['Inv No','Date','Client','Amount','Tax','Total','Notes'],colModel:[
{name:'id',index:'id',width:60,sorttype:"int"},{name:'invdate',index:'invdate',width:90,sorttype:"date",formatter:"date"},{name:'name',index:'name',width:100},{name:'amount',index:'amount',width:80,align:"right",sorttype:"float",formatter:"number"},{name:'tax',index:'tax',sorttype:"float"},{name:'total',index:'total',{name:'note',index:'note',width:150,sortable:false}
],pager: "#pager",viewrecords: true,autowidth: true,height: 'auto',caption: "Test Grid"
});
jQuery("#list").jqGrid('filterToolbar',{ stringResult: true,searchOnEnter: false,defaultSearch: "cn" });
<table id="list"></table>
<div id="pager"></div>
,
您必须在 foreach 之前在 searchInput 事件侦听器中定义 rows 和 indexRow。