使用 javascript 在多个表上创建搜索功能答案

【问题标题】：Create search function on multiple tables with javascript使用 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
我真的很抱歉，但你能告诉我怎么做吗？非常感谢！

标签： php html css mysql phpmyadmin

【解决方案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";
      }
      
    }   
  }
}

【讨论】：