Question

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Pre-Enrollment</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/custom.css">
    </head>

    <nav>
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="FromEnrollment.php">Pre-Enrollment</a></li>
            <li role="presentation"><a href="Students.php">Students</a></li>
            <li role="presentation"><a href="Subjects.php">Subjects</a></li>
        </ul>
    </nav>
    <br>
    <br>
    <body>
        <div class="container">
            <div class="row">
                    <div class="col-md-4">
                        <form id="idNumber" action="#">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="ID NUMBER">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Enter</button>
                                <button class="btn btn-default" type="button" onclick="resetIdNumber()" value="reset">Reset</button>     
                            </span>
                        </div>
                        </form>
                    </div>
                    <div class="col-md-4 col-md-offset-4">
                        <select style="width: 120px;">
                            <option value="All">Overall Term</option>
                            <option value="First">First Term</option>
                            <option value="Second">Second Term</option>
                            <option value="Short">Short Term</option>
                        </select>
                    </div>
            </div>
            <br>
            <div class="row">
                    <div class="col-md-6">
                        <p> NAME:</p>
                    </div>
                    <div class="col-md-4">
                       <p> Course and Year: </p>
                    </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <form id="Subjects" action="#">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Enter</button>
                            <button class="btn btn-default" type="button" onclick="resetSubjects()" value="reset">Reset</button>
                        </span>
                    </div>
                    </form>
                </div>
            </div>
            <br>

            <?php
            include 'dbcon.php';
            $stmt = $pdo->query("SELECT coursenumber as 'Course No.', destitle as 'Descriptive Title', units as 'Units' FROM subjects");
            ?>

            <div class="row">
                    <div class="col-md-6 col">  
                        <table class="table">
                            <tr>
                                <th>Course No.</th>
                                <th>Descriptive Title</th>
                                <th>Unit</th>
                                <th></th>
                            </tr>

                            <?php
                            $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
                            foreach ($results as $row) {
                                    echo "<tr>";
                                    echo "<td>".$row['Course No.']."</td>";
                                    echo "<td>".$row['Descriptive Title']."</td>";
                                    echo "<td>".$row['Units']."</td>";
                                    echo "<td> <button class='btn btn-default' type='button'> <span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button></td>";
                                    echo "</tr>";
                            }
                            ?>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table">
                            <tr>
                                <th>Course No.</th>
                                <th>Descriptive Title</th>
                                <th>Unit</th>
                                <th>Term</th>
                                <th></th>
                            </tr>
                        </table>
                        <button class="button" type="button" value="apply">Apply</button>
                    </div>
            </div>
            </div>
        <script>
            function resetIdNumber(){
                document.getElementById("idNumber").reset();
            }
            function resetSubjects(){
                document.getElementById("Subjects").reset();
            }
        </script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        </body>

</html>

我已经使用php代码在html表中成功显示了我的数据库。现在我想使用占位符过滤/搜索表格中的特定数据。有什么方法可以用我的代码吗？

如何在表格中搜索/过滤特定数据？

0 个答案: