Question

我希望按product name进行搜索，然后从db获取productdetailsid，然后将其与此表中的每一行进行比较（如果存在），为行设置bachground-color！

<div class="input-group m-b"><span class="input-group-btn">
   <button type="button" class="btn btn-primary">Go!</button> </span> <input type="text" class="form-control"id="autocomplete">
    </div>

            <div class="table-responsive">

             <table class="table table-striped table-bordered table-hover">

                    <thead>
                    <tr>
                        <th style="text-align: center">#</th>
                        <th style="text-align: center">Product Name</th>
                        <th style="text-align: center">Quantity</th>
                        <th style="text-align: center">Product Price</th>
                        <th style="text-align: center">Whole Price</th>
                        <th style="text-align: center">Supplier Name</th>
                        <th style="text-align: center"></th>

                    </tr>
                    </thead>
                    <tbody>
                        <?php
                        $per_page=5;
                        if (isset($_GET["page"])) {
                            $page = $_GET["page"];
                        }
                        else {
                            $page=1;
                        }
                        $start_from = ($page-1) * $per_page;
                        $sql = "select p.productname,p.quantity,p.onesale,p.wholesale,p.productdetailsid,s.fullname from productdetails p , supplier s where s.supplierid = p.supplierID LIMIT $start_from,$per_page";
                        $count = ($page*5)-4;

                        $result = $conn->query($sql);
                        if ($result->num_rows > 0) {
                            while($row = $result->fetch_assoc()) {
                            echo "<form method=\"post\" action=\"\">";
                            echo "<tr>";
                            echo "<td>" . $count++ . "</td>";
                            echo "<td>" . $row["productname"] . "</td>
                            <td>" . $row["quantity"] . "</td>
                            <td>" . $row["onesale"] . "</td>
                            <td>" . $row["wholesale"] . "</td>
                            <td>" . $row["fullname"] . "</td>
                            <td><button type=\"submit\" class=\"btn btn-xs btn-danger\" name=\"removeBtn\"><i class=\"fa fa-times\"></i> </button></td>
                            <td style=\"display:none;\"><input type=\"hidden\" name=\"id\" value='".$row["productdetailsid"]."'>
                            </td>"
                            ;
                            echo "</tr>";
                            echo "</form>";
                        }

                        }
                        $conn->close();
                        ?>
                    </tbody>
                </table>
            </div>

Answer 1

对于表中的实时搜索，您需要使用AJAX来获取结果，然后使用该结果，您可以使用Javascript循环查找找到的行并更改颜色。我更喜欢PHP脚本中的JSON输出（JSON数组输出），我可以在Javascript循环中使用它...

PHP中的

你需要制作一个单独的PHP文件来获取ajax输出...比如ajax.php

<?php
//Assuming that 'q' is the POST variable for finding the query
if(!empty($_POST['q']))
{
    //Put your database query execution code here with using q as search query
    //Set header to JSON
    header('Content-Type:application/json');
    //assuming that $result is associative array of your SQL query output 
    which contains array of the rows to be hightlighted
    echo json_encode($result);
}

这将提供一个JSON数组输出，可以通过AJAX或$ .post函数轻松读取...

在Javascript中

这是棘手的部分。你需要进行ajax调用，然后使用该数据突出显示行....但首先需要为表体提供一个ID ...

...<tbody id="table1">....</tbody></table>

然后你需要使用ajax或$ .post函数来进行调用，我使用$ .post作为它的简单

/**** Cosidering "input1" is a input element for getting query to be searched with id = input1 ****/
var q_data = $("#input1").val();
$.post(ajax.php,
{
    q: q_data
},
function(data,status)
{
   $.each($("#table1").find("<tr>"),function(i,value)
   {
       var element = $(this);
       $.each(data,function(i,val2){
          if(val2 == $(element).find("<td>").text())
            {
              $(element).css('background','lgihtyellow');
            }
       });
   });
}
);

在适当的更改之前代码可能无效，但这是表中基于ajax的实时搜索的逻辑和概念

在html表中实时搜索

1 个答案: