搜索html表格答案

【问题标题】：Search html table搜索html表格
【发布时间】：2020-09-18 05:10:29
【问题描述】：

我有一个网站，其中显示包含数据库数据的表格，我正在尝试实现搜索功能，但无法使其正常工作。搜索功能的代码大部分是从我看过的教程中复制的，因为我对编码还很陌生。我曾尝试查找拼写错误、缺少括号等，但无法正常工作。所以我希望有人能告诉我我做错了什么:)

index.php:

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="utf-8">
    <meta name="description" content="Inventar">
    <meta name="author" content="Martin Eide Bjørndal">
    <title>Ut</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/src/css/style.css">
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </head>

  <body>
    <button class="back" onclick="window.location='../'">
      <img src="/src/icons/back.png">
    </button> <!-- Tilbake knapp -->

    <div class="container-fluid" id="utskjekkcontainer">
      <div class="row justify-content-center">
        <div class="col-mv-10 bg-light mt-5 rounded p-3">
          <h1 class="text-primary p-2">Utskjekk</h1>
          <hr>
          <div class="form-inline">
            <label for="search" class="font-weight-bold lead text-dark">Søk</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="search" id="search_text" class="form-control form-control-lg rounded-0 border-primary" placeholder="Søk...">
          </div>
          <hr>
          <?php
            include "../src/fn/init.php";
            $stmt=$conn->prepare("SELECT * FROM inventar");
            $stmt->execute();
            $result=$stmt->get_result();
          ?>
          <table class="table table-hover table-light table-striped" id="table_data">
            <thead>
              <tr>
                <th>#</th>
                <th>Navn</th>
                <th>Antall</th>
                <th>Tilgjengelig</th>
                <th>Plassering</th>
                <th>Vekt (kg)</th>
                <th>Størrelse x y z (cm)</th>
                <th>Kommentar</th>
              </tr>
            </thead>
            <tbody>
              <?php while($row=$result->fetch_assoc()){ ?>
                <tr>
                  <td><?php echo $row["id"]; ?></td>
                  <td><?php echo $row["navn"]; ?></td>
                  <td><?php echo $row["antall"]; ?></td>
                  <td><?php echo $row["antall_tilgjengelig"]; ?></td>
                  <td><?php echo $row["plassering"]; ?></td>
                  <td><?php echo $row["vekt"]; ?></td>
                  <td><?php echo $row["størrelse"]; ?></td>
                  <td><?php echo $row["kommentar"]; ?></td>
                </tr>
              <?php } ?>
             </tbody>
           </table>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      $(document).ready(function(){
        $('#search_text').keyup(function(){
          var search = $(this).val();
          $.ajax({
            url:'action.php',
            method:'post',
            data:{query:search},
            success:function(response){
              $('#table_data').html(response);
            }
          });
        });
      });
    </script>



  </body>

</html>

action.php:

   <?php

    include "../src/fn/init.php";
    $output = "";

    if(isset($_POST["query"])){
        $search = $_POST["query"];
        $stmt = $conn->prepare("SELECT * FROM inventar WHERE navn LIKE CONCAT('%','?','%') OR id LIKE CONCAT('%','?','%') OR plassering LIKE CONCAT('%','?','%')");
        $stmt->bind_param("sss",$search, $search, $search);
    } else {
        $stmt=$conn->prepare("SELECT * FROM inventar");
    };
    $stmt->execute();
    $result=$stmt->get_result();

    if($result->num_rows>0){
        $output = "<thead>
                        <tr>
                            <th>#</th>
                            <th>Navn</th>
                            <th>Antall</th>
                            <th>Tilgjengelig</th>
                            <th>Plassering</th>
                            <th>Vekt (kg)</th>
                            <th>Størrelse x y z (cm)</th>
                            <th>Kommentar</th>
                        </tr>
                    </thead>
                    <tbody>";

        while($row=$result->fetch_assoc()){
            $output .= "
                <tr>
                    <td>".$row["id"]."</td>
                    <td>".$row["navn"]."</td>
                    <td>".$row["antall"]."</td>
                    <td>".$row["antall_tilgjengelig"]."</td>
                    <td>".$row["plassering"]."</td>
                    <td>".$row["vekt"]."</td>
                    <td>".$row["størrelse"]."</td>
                    <td>".$row["kommentar"]."</td>
                </tr>";
        };
        $output .= "</tbody>";
        echo $output;
    } else {
        echo "<h3> Found no match!</h3>";
    };


?>

【问题讨论】：

".echo $row["størrelse".]" 你的点放错了
语法错误：在 $.ajax 函数中将 method="post" 更改为方法："post"
谢谢！，现在我已经修复了这些错误，但它仍然无法正常工作。
我认为问题出在 $(document).ready();没有被执行，我不知道为什么会这样。
名称不匹配：您的表 id 被命名为 table_data，但 Ajax 响应使用的是 table-data ... 不是同名引用。

标签： javascript php html ajax search

【解决方案1】：

我在处理大型数据表时遇到了同样的问题，我偶然发现了JQuery Datatables

它有一个内置的搜索功能，允许排序和其他很酷的东西:)

【讨论】：

看起来真的很酷，我想我可能会放弃我自己的设计并改用它！谢谢！

【解决方案2】：

你可以使用 JQuery 表

<script src="js/jquery-3.1.0.js"></script> <script src="js/jquery.dataTables.min.js"></script>

并声明这样的脚本来连接你的表

`<script>
$(document).ready(function(){
    $('#table_data').DataTable();
});
</script>`

有关更多信息，您可以阅读此文档https://datatables.net/

【讨论】：