Javascript 表格过滤器不显示表格标题
[英]Javascript table filter doesn't show table headers
问题描述
Im using a script to filter a table based on a select value.
我使用脚本根据 select 值过滤表。 The script works, the only problem is that it filter also the headers of the table, which Id like to show always.该脚本有效，唯一的问题是它还过滤了表格的标题，我希望始终显示。 This is the javascript and the table:这是 javascript 和表格：
$(document).ready(function($) { $('#mac').change(function() { var selection = $(this).val(); var dataset = $('table').find('tr'); dataset.show(); dataset.filter(function(index, item) { return $(item).find('td:last-child').text().split(';').indexOf(selection) === -1; }).hide(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input type="text" id="mac"> <table id="table_id" class="display"> <thead> <tr> <th>Tipo</th> <th>Descrizione</th> <th>Scadenza</th> <th>Società</th> <th>Macrotema</th> </tr> </thead> <tbody> <tr style=" background-color:"> <td>Prescrizione</td> <td>Corsi di aggiornamento </td> <td> <nobr>2025/01/01</nobr> </td> <td>XXXX</td> <td>SEDE; </td> </tr> <tr style=" background-color:"> <td>Prescrizione</td> <td>Rinnovo iscrizione</td> <td> <nobr>2024/12/31</nobr> </td> <td>XXXX</td> <td>SEDE; </td> </tr> <tr style=" background-color:"> </tbody> </table>
My question is: How can I edit the script to show the headers?我的问题是：如何编辑脚本以显示标题？
Thank you for your time:D let me know if I have to explain the situation better.感谢您的宝贵时间：如果我必须更好地解释情况，请告诉我。
2 个解决方案
解决方案1
2 已采纳 2020-07-21 08:05:52
you can add a more specific selector:您可以添加更具体的选择器：
var dataset = $('table tbody tr');
解决方案2
-1 2020-07-21 08:19:22
Please find the below solution with output.请使用 output 找到以下解决方案。
$(document).ready(function($) { $('#mac').change(function() { var selection = $(this).val(); var dataset = $('table').find('tr'); dataset.show(); dataset.filter(function(index, item) { return index.== 0 && $(item):find('td.last-child').text();split('.').map(x => x.trim());indexOf(selection) === -1. });hide(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input id="mac"> <table id="table_id" class="display"> <thead> <tr> <th>Tipo</th> <th>Descrizione</th> <th>Scadenza</th> <th>Società</th> <th>Macrotema</th> </tr> </thead> <tbody> <tr style=" background-color:"> <td>Prescrizione</td> <td>Corsi di aggiornamento </td> <td> <nobr>2025/01/01</nobr> </td> <td>XXXX</td> <td>SEDE; </td> </tr> <tr style=" background-color:"> <td>Prescrizione</td> <td>Rinnovo iscrizione</td> <td> <nobr>2024/12/31</nobr> </td> <td>XXXX</td> <td>SEDA; </td> </tr> <tr style=" background-color:"> </tbody> </table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.