【发布时间】：2019-10-14 21:12:00
【问题描述】：
关于 php 脚本中的搜索功能，我遇到了一些麻烦。搜索功能是用 javascript 编写的，应该循环遍历下面的整个表格，并在用户输入搜索字段的同时挑选出匹配的内容。功能在“Beskrivelse”选项卡中搜索。但是，当我开始在搜索字段中输入时，表格标题（用户名、Beskrivelse、Links、Kommentar、Billede、Rediger）也会消失，因为它也是表格的一部分。
我的问题是； 如何在搜索标题下方的表格行时保持标题不变？标题不应该在任何时候消失。
Table header is shown Table header is hidden
这是 php 脚本的完整代码：
<?php
//including the database connection file
include_once("config.php");
//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM 3difpensum ORDER BY id DESC"); // mysql_query is deprecated
$result = mysqli_query($mysqli, "SELECT * FROM 3difstortab ORDER BY ID DESC"); // using mysqli_query instead
?>
<html>
<head>
<title>Homepage</title>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
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";
}
}
}
}
</script>
<style>
.container {
width: 100%;
text-align: center;
margin-top: 50px;
padding: 5px;
}
.searchfield {
margin: 0 auto;
width: 400px;
height: 40px;
font-size: 14px;
display: inline-block;
font-family: Helvetica;
}
.addmore {
background-color: #535b63; /* Green */
border: none;
color: white;
padding: 11px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
color: #ffffff;
font-family: Helvetica;
width: 400px;
}
.secondcontainer {
width: 100%;
text-align: center;
padding: 5px;
}
.thirdcontainer {
width: 100%;
text-align: center;
margin-top: 30px;
}
.tableview {
margin: 0 auto;
}
.tableheader {
text-align: center;
font-family: Helvetica;
font-size: 14px;
background-color: #535b63;
color: #fff;
}
.tableheader td {
padding: 5px;
}
</style>
</head>
<body>
<a href="logout.php">Logout</a>
<div class="container">
<input type="text" class="searchfield" id="myInput" onkeyup="myFunction()" placeholder="Søg efter Beskrivelse...">
</div>
<div class="secondcontainer">
<a href="add.html" class="addmore">Add New Data</a><br/><br/>
</div>
<div class="thirdcontainer">
<table width='70%' class="tableview" border=0 id="myTable">
<tr class="tableheader">
<td>Username</td>
<td>Beskrivelse</td>
<td>Links</td>
<td>Kommentar</td>
<td>Billede</td>
<td>Rediger</td>
</tr>
<?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array
while($res = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$res['ejer']."</td>";
echo "<td>".$res['beskrivelse']."</td>";
echo "<td>".$res['links']."</td>";
echo "<td>".$res['kommentar']."</td>";
echo "<td>"."<img src='".$res['billede']."'></td>";
echo "<td><a href=\"edit.php?ID=$res[ID]\">Edit</a> | <a href=\"delete.php?ID=$res[ID]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";
}
?>
</table>
</div>
</body>
</html>【问题讨论】：
-
简单解决方案：for (i = 0; i 让它从 1 开始，所以它跳过表头行
标签： javascript php html-table