如何使用JavaScript在文本表中搜索貸款編號

Question

這是我的查看頁面： 在此頁面中，我有一個文本框“ search”。如果我在該框中輸入貸款編號，則應進行過濾，並且僅使用javascript給予該貸款。

此javascript代碼僅適用於html表，但我想在文本框表中使用。

 function myFunction() { var input, filter, table, tr, td, i, txtValue; var input = $("#myInput").val(); filter = input.value.toUpperCase(); var table = $("#tb3").val(); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[1]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } 

 table, tr, td, th { border: 1px solid blue; padding: 2px; } table th { background-color: #999999; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tb3"> <tr> <th>Unique ID</th> <th>Random ID</th> </tr> <tr> <td><input type="text" value="214215"></td> <td><input type="text" value="442"></td> </tr> <tr> <td><input type="text" value="1252512"></td> <td><input type="text" value="556"></td> </tr> <tr> <td><input type="text" value="2114"></td> <td><input type="text" value="4666"></td> </tr> <tr> <td><input type="text" value="3245466"></td> <td><input type="text" value="334"></td> </tr> <tr> <td>24111</td> <td>54364</td> </tr> </table> <br /> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 

Answer 1

請一直使用jQuery

 $("#myInput").on("input", function() { var filter = String(this.value).toUpperCase(); var $rows = $("#tb3 tbody tr"); if (filter) { $rows.each(function() { $tr = $(this); $tr.hide(); $(this).find("input").each(function() { if (this.value.indexOf(filter) != -1) { // === 0 if filter match from start $tr.show() } }) }) } else { $rows.show() } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tb3"> <thead> <tr> <th>Unique ID</th> <th>Random ID</th> </tr> </thead> <tbody> <tr> <td><input type="text" value="214215"></td> <td><input type="text" value="442"></td> </tr> <tr> <td><input type="text" value="1252512"></td> <td><input type="text" value="556"></td> </tr> <tr> <td><input type="text" value="2114"></td> <td><input type="text" value="4666"></td> </tr> <tr> <td><input type="text" value="3245466"></td> <td><input type="text" value="334"></td> </tr> </tbody> </table> <br /> <input type="text" id="myInput" placeholder="Search for names.." title="Type in a name"> 

如果ID是靜態的，則使其成為該行的一部分：

 $("#myInput").on("input", function() { var val = this.value.toUpperCase() $("#tb3 tbody tr").each(function() { var id = String($(this).data("id")); $(this).toggle(id.indexOf(val) != -1) // use === 0 to match from start }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tb3"> <thead> <tr> <th>Unique ID</th> <th>Random ID</th> </tr> </thead> <tbody> <tr data-id="214215"> <td><input type="text" value="214215"></td> <td><input type="text" value="442"></td> </tr> <tr data-id="1252512"> <td><input type="text" value="1252512"></td> <td><input type="text" value="556"></td> </tr> <tr data-id="2114"> <td><input type="text" value="2114"></td> <td><input type="text" value="4666"></td> </tr> <tr data-id="3245466"> <td><input type="text" value="3245466"></td> <td><input type="text" value="334"></td> </tr> <tbody> </table> <br /> <input type="text" id="myInput" placeholder="Search for names.." title="Type in a name"> 

Answer 2

您可以使用hidden屬性過濾掉non-matches 。

 const filterTable = (value = '') => document // get all `#tb3` table rows (tr) .querySelectorAll('#tb3 tr') // for each row in `#tb3` table .forEach((row) => { if (!value) { // if value is empty (''), make the row visible and exit. row.hidden = false; return; } // get the input field of the first `td` of the current row (tr) // it would be easier if you would assign a class name to the input const input = row.querySelector('td:first-child input'); // pick `input.value` from the `td` (or default to an empty string) const loanNo = ((input || {}).value || '').trim(); // make the row visible if the `td input.value` matches our query, otherwise hide it row.hidden = loanNo != value; // you can change the matching algorithm by looking at my end notes below }); document .querySelector('#search') .addEventListener('input', ({ target }) => filterTable(target.value)); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" integrity="sha256-Nfu23DiRqsrx/6B6vsI0T9vEVKq1M6KgO8+TV363g3s=" crossorigin="anonymous" /> <div class="form-group"> <input class="form-control" placeholder="Search" id="search" autocomplete="off"/> </div> <tr /> <table class="table table-bordered table-striped table-xxs" id="tb3"> <thead> <tr> <th>Loan No</th> <th>Party Name</th> </tr> </thead> <tbody> <tr><td><input value="100" class="form-control" /></td><td>Republican</td></tr> <tr><td><input value="250" class="form-control" /></td><td>Democrat</td></tr> <tr><td><input value="1000" class="form-control" /></td><td>Green</td></tr> <tr><td><input value="120" class="form-control" /></td><td>Pirats</td></tr> </tbody> </table> 

---

1. 匹配的執行方式是exact ，但是您可以根據需要始終使用loanNo.includes(value)或loanNo.startsWith(value) 。