使用 javascript 在多个表上创建搜索功能
Posted
技术标签:
【中文标题】使用 javascript 在多个表上创建搜索功能【英文标题】：Create search function on multiple tables with javascript 【发布时间】：2020-10-27 20:20:10 【问题描述】：我是一名新开发人员。我现在正在为多个表执行搜索功能。问题是当我搜索它时，它只显示作业名，而不是同一张表中的全部信息。输出应该显示工作信息以及搜索的工作名称。我希望你们能帮助我。先感谢您 ！！以下是我在搜索前后的当前输出，附有代码。
搜索前
搜索后
代码
<!DOCTYPE html>
<html>
<head>
<title>My Job</title>
<script>
//searching
function myFunction()
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table)
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++)
td = tr[i].getElementsByTagName("td")[0];
if (td)
if (td.innerHTML.toUpperCase().indexOf(filter) > -1)
tr[i].style.display = "";
else
tr[i].style.display = "none"
);
</script>
<link rel="stylesheet" type="text/css" href="joblist.css">
</head>
<body><br>
<div class="title">
<center>APPLY JOB<center>
</div><br>
<ul align="center">
<li><a href="welcome2.php">HOME</a></li>
</ul>
<br><br>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search your job" class="carian">
<br><br>
<ol>
<?php
include("DB.php");
$query = "SELECT * FROM createjob";
$result = mysqli_query($link,$query);
if (mysqli_num_rows($result) > 0)
// output data of each row
while ($row = mysqli_fetch_assoc($result))
$id = $row["id"];
$jobname = $row["jobname"];
$jobtime = $row["jobtime"];
$jobday = $row["jobday"];
$venue = $row["venue"];
$worker = $row["worker"];
$inform = $row["inform"];
$phonenum = $row["phonenum"];
?>
<fieldset class="box" >
<table data-name="mytable">
<tr>
<th align="left">Job Name </th>
<td><?php echo $jobname ; ?></td>
</tr>
<tr>
<th align="left">Job Time </th>
<td><?php echo $jobtime; ?></td>
</tr>
<tr>
<th align="left">Job Day </th>
<td><?php echo $jobday; ?></td>
</tr>
<tr>
<th align="left">Venue </th>
<td><?php echo $venue; ?></td>
</tr>
<tr>
<th align="left">Number Of Worker </th>
<td><?php echo $worker; ?></td>
</tr>
<tr>
<th align="left">Phone Number </th>
<td><?php echo $phonenum; ?></td>
</tr>
<tr>
<th align="left">Information </th>
<td><?php echo nl2br($inform);?></td>
</tr>
</table>
<br>
<button class="bottom"><a href="apply.php?jobid=<?php echo $id; ?>">Apply</a></button>
</fieldset>
<?php
else
echo "0 results";
?>
</ol>
</body>
</html>
body
background-image: linear-gradient(rgba(0, 0, 0, 0.45),
rgba(0, 0, 0, 0.45)), url("16.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
border-collapse: collapse;
thead
background-color: #FFD34E;
.bottom
background-color: #FFD34E;
border-radius: 4px;
height: 30px;
padding-top: 5px;
width: 100px;
border: none;
.box
background-color:white;
border-radius: 10px;
float:left;
width:320px;
border-style: outset;
bottom:10px;
.carian
position: relative;
left:55px;
height:20px;
width: 190px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
background-color: white;
background-image: url('18.png');
background-position: 7px 0px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
.carian:focus
width: 20%;
.title
font-weight:bold;
font-size:40px;
color:white;
text-shadow: 4px 4px black;
.bottom
background-color: #FFD34E;
border-radius: 4px;
height: 30px;
padding-top: 5px;
border: none;
width:100%;
ul
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFD34E;
position: -webkit-sticky; /* Safari */
position: sticky;
width: 100%;
li
float: center;
li a
display: block;
color: black;
text-align: center;
padding: 20px 340px;
text-decoration: none;
li a:hover
color: white;
background-color:#552B00;
【问题讨论】：
为什么要为每个数据库行创建一个表？只需创建一个带有thead 的表并在tbody 中创建循环即可创建tr
我真的很抱歉，但你能告诉我怎么做吗？非常感谢！
【参考方案1】：
这可能是创建表格的更好方法：
<fieldset class="box">
<table id="myTable" data-name="mytable">
<thead>
<tr>
<th>Job Name</th>
<th>Job Time</th>
<th>Job Day</th>
<th>Venue</th>
<th>Number Of Worker</th>
<th>Phone Number</th>
<th>Information</th>
<th></th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><?= $row["jobname"]; ?></td>
<td><?= $row["jobtime"]; ?></td>
<td><?= $row["jobday"]; ?></td>
<td><?= $row["venue"]; ?></td>
<td><?= $row["worker"]; ?></td>
<td><?= $row["inform"]; ?></td>
<td><?= $row["phonenum"]; ?></td>
<td>
<button class="bottom"><a href="apply.php?jobid=<?= $row["id"]; ?>">Apply</a></button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</fieldset>
有了这样的普通表格，您就可以使用 w3schools 的搜索功能： https://www.w3schools.com/howto/howto_js_filter_table.asp
我还制作了来自 w3schools 的示例的扩展版本。此函数将搜索所有td 字段：
function myFunction()
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++)
var tds = tr[i].getElementsByTagName("td");
console.log(tds.length);
var found = false;
for (var ii = 0, c = tds.length; ii < c; ii++)
var td = tds[ii];
if (td && found == false)
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1)
found = true;
else
found = false
if (found)
tr[i].style.display = "";
else
tr[i].style.display = "none";
【讨论】：
以上是关于使用 javascript 在多个表上创建搜索功能的主要内容，如果未能解决你的问题，请参考以下文章