我发现了这个小代码,它的作用就像一个魅力! 演示:https://jsfiddle.net/gdv06jsu/4/
我把它放到我的项目中,现在出现了问题。
每次我进行输入时,整个表格都会消失
<th>
标签。
首先它运行良好,我已经为所有列放置了搜索输入,然后 问题就在这里。现在只需要 1 个输入就无法工作?!
有人有想法吗?
这是我的代码:
<?php
include("dbconnect.php");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Abfrage</title>
<script src="js-css/jquery-2.1.0.js"></script>
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<link href="js-css/form-problem-melden.css" rel="stylesheet">
<script type="text/javascript">
$(window).ready(function(){
var $filterableRows = $('#MI6').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
return $(this).find('td').filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $(this).find('td').length;
}).show();
});
});
</script>
</head>
<body>
<input type="text" id="problem" class="search-key" placeholder="Problem Livesuchee">
<table id="MI6">
<tr>
<th>Problem</th>
<th style="width:250px;">Meldender</th>
<th style="width:120px;">Prio</th>
<th style="width:102px;">Status</th>
<th>..</th>
</tr>
<?php
$ergebnis = mysqli_query($db, "SELECT * FROM wt_ticket");
while($row = mysqli_fetch_object($ergebnis))
{
$akt_zeit = time();
$offen1 = $akt_zeit - $row->timestamp;
$offen_tage = $offen1 / 60 / 60 / 24;
$offen_stunden = $offen1 / 60 / 60;
$offen_minuten = $offen1 / 60;
if($offen_tage < 1 && $offen_minuten > 60 ){
$offen = floor($offen_stunden) . " Stunden";
}
if($offen_tage < 1 && $offen_stunden < 1 ){
$offen = floor($offen_minuten) . " Minuten";
}
if($offen_tage >= 1){
$offen = floor($offen_tage) . " Tage";
}
if($offen_tage < 1 && $offen_stunden < 1 && $offen_minuten < 1){
$offen = $offen1 . " Sekunden";
}
$id = $row->id;
?>
<tr>
<td data-input="problem"><?php echo $row->problem_titel; ?> - <?php echo $row->problem; ?> - <?php echo $row->problem_spez; ?></td>
<td><? echo $row->email; ?></td>
<td><? echo $row->prio; ?></td>
<td><? echo $row->erledigt_prozent; ?>
<td>
<a href="ticket_edit.php?id=<? echo $id; ?>" id="edit">bearbeiten <span></span><i class="fas fa-edit"></i></a>
<a href="ticket_del.php?id=<? echo $id; ?>" id="del">löschen <span></span><i class="fas fa-trash"></i></a>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
最佳答案
根据 fiddle ,每个 td
包含属性data-input
用于获取标签的内部文本,如 <td data-input="name">James</td>
。因此,您必须指定它,因为您的代码中也会使用它 $(this).data('input')
我希望它能帮助你:)
关于javascript - jquery多术语列搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49703746/