添加行后在表中搜索
[英]Search in Table after adding a Row
问题描述
嗨，由于某种原因，我的搜索栏不会过滤新行，例如，如果我添加 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>
2 个解决方案
解决方案1
0 2021-03-09 07:17:40
尝试使用 jqGrid 作为搜索过滤器
我有一个来源，你可以找到它
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",tax:"10.00",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', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{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>
解决方案2
0 2021-03-09 07:22:16
您必须在 foreach 之前的 searchInput 事件侦听器中定义 rows 和 indexRow。
使用javascript动态在第一个表格行旁边添加表格行，而不是在第一个表格行之后添加
[英]Dynamically adding table row beside the first table row instead after the first table row using javascript
在使用jQuery在iframe中加载页面后，将CSS类添加到表格行中吗？
[英]Adding a CSS class to a table row after loading a page in an iframe with jQuery?
jTable插件：添加新行后，不会刷新动态表
[英]jTable Plugin : The dynamic table is not getting refreshed after adding a new row
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.