使用Javascript函数搜索HTML表格时，表格标题消失

时间：2019-05-29 09:37:56

标签： javascript php html-table

关于php脚本中的搜索功能，我遇到了一些麻烦。搜索功能是用JavaScript编写的，应该在用户遍历整个表格并在用户输入搜索字段的同时挑选出匹配的内容。这些功能在“ Beskrivelse”标签中搜索。但是，当我开始在搜索字段中键入内容时，表标题（用户名，Beskrivelse，链接，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>

1 个答案:

答案 0 :(得分：-1)

确定，您的问题已解决

<?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">
		<th>Username</th>
		<th>Beskrivelse</th>
		<th>Links</td>
		<th>Kommentar</th>
		<th>Billede</th>
		<th>Rediger</th>
	</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>

相关问题
最新问题