I'm currently trying to create a live search for a specific column in a table. I've searched a bit but I can only find solutions to search over all columns. This is my code:
function searchInTable(table) { var value = this.value.toLowerCase().trim(); jQuery(table).each(function (index) { if (!index) return; jQuery(this).find("td").each(function () { var id = $(this).text().toLowerCase().trim(); var not_found = (id.indexOf(value) == -1); $(this).closest('tr').toggle(!not_found); return not_found; }); }); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="search-table-input" class="search-table-input" type="text" onkeyup="searchInTable('.table tr')" placeholder="Search Number..."> <table class="table"> <thead> <tr> <th class="table-number"> <span class="nobr">Number</span> </th> <th class="table-date"> <span class="nobr">Date</span> </th> </tr> </thead> <tbody> <tr> <td> <a>264</a> </td> <td> <span>2019-01-02</span> </td> </tr> <tr> <td> <a>967</a> </td> <td> <span>2019-01-02</span> </td> </tr> <tr> <td> <a>385</a> </td> <td> <span>2019-01-02</span> </td> </tr> <tr> <td> <a>642</a> </td> <td> <span>2019-01-02</span> </td> </tr> </tbody> </table>
My function has some errors and don't work like it should.
How can I change my function that way that when I start typing only the number gets filtered? I need to make the function dynamically so that I can pass the column which should be used for the search.
The line that's causing it to search over all the columns is this one:
jQuery(this).find("td").each(function () {
...which takes each cell in the current row and looks to see if it contains value
. If you only want to check as specific column, you should pass in the column index as something like columnIndex
, and then you can select the correct column by doing jQuery(this).find("td").eq(columnIndex)
, using jQuery's .eq()
function to select the correct one. The code should look something like this:
function searchInTableColumn(table, columnIndex) {
//check this.value exists to avoid errors
var value = this.value ? this.value.toLowerCase().trim() : "";
jQuery(table).each(function (index) {
if (!index) return;
var tableCell = jQuery(this).find("td").eq(columnIndex);
var id = tableCell.text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
});
}
Then you can call searchInTableColumn(table, 0)
and it will only look in the first column.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.