使用JQuery函數過濾php html文件中的表

Question

在我當前正在進行的有關Web開發的課程工作的其中一個頁面中，我在Homepage.php上有一個表格，我希望根據表格上方下拉菜單中選擇的選項過濾顯示的內容。 Utils.js文件包含typeFilter函數，該函數接受一個表名，一個下拉列表名（在此期間稱為過濾器名）和一個show（）和hide（）所基於的列名。

從先前發現的有關jquery表過濾的stackoverflow解決方案中，我設法使該函數在jsfiddle（ http://jsfiddle.net/dey17o20/6/ ）中運行，但是當嘗試使其在我的課程環境中可重用時，它確實使用時不更新顯示的表。 我是使用JQuery和JS的新手，因此對解決此問題的任何幫助將不勝感激！ :)

Utils.js（根據答案更新）

function typeFilter(tableName, filterName, columnName) {
    const elem = $('#' + filterName);
    elem.change(function() {
        if(elem.val() != "All"){
          $("#" + tableName + " td." + columnName + ":contains('" + elem.val() + "')").parent().show();
          $("#" + tableName + " td." + columnName + ":not(:contains('" + elem.val() + "'))").parent().hide();
        }
      else{
      $("'#" + tableName + " td." + columnName + "'").parent().show(); 
      }
      });
  };

Homepage.php

    session_start();
    require('../utilities/Config.php');
    require('../utilities/Utils.php');
    require('../model/animals.php');
    require('../model/requests.php');
    require('../utilities/Auth.php');
    usercheck();
?>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Homepage</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../utilities/Utils.js"></script>

</head>
<body>
    <div class="container">
    <div class="table-responsive">
        <p class="tabletext"> Listed below are all animals available for adoption. </p>
        <table class="table table-striped" id="table1">
        <label for="filter1"> Filter by: </label>
        <select name='type' id="filter1" required>
            <option value='All'>All</option>
            <option value='Dog'>Dog</option>
            <option value='Cat'>Cat</option>
            <option value='Horse'>Horse</option>
            <option value='Bird'>Bird</option>
            <option value='Reptile'>Reptile</option>
        </select>
        <script language="javascript"> typeFilter('table1', 'filter1', 'col1'); </script>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Picture</th>
            <th scope="col">Type</th>
            <th scope="col">Description</th>
            <th scope="col">DOB</th>
            <th scope="col">Request Adoption</th>
        </tr>
        <?php

        $rows = Animals::listAvailable($_SESSION['username']);
        forEach($rows as $row){   //Creates a loop to loop through results
            ?>
            <tr scope='row'>
            <td><?= $row['ID'] ?></td>
            <td><?= $row['Name']?> </td>
            <td><img src="../uploads/<?= $row['Picture'] ?>" alt="HTML5 Icon" height="150" width="150"></td>
            <td class='col1'><?= $row['Type'] ?></td>
            <td><?= $row['Description'] ?></td>
            <td><?= $row['DOB'] ?></td>
            <td>
            <form class= 'formbox' id='adopt' action='Homepage.php' method='post'>

                <input type="hidden" name="animalID" value= "<?= $row['ID'] ?>"/>  
                <input type="hidden" name="submitted" value="true"/>
                <button id ='reqbutton' type='submit'  class="btn btn-warning">Request</button>
            </form>
            </td>
            </tr>
        <?php
        }
        ?>
    </table>
    </div>
</body>
</html>

Answer 1

好的，您的函數中只有兩個小錯誤：

const elem = $(this);  // wrong

此時，您對對象（元素）沒有任何引用。 因此，“此”將沒有任何內容。

在函數參數中，您已經通過了過濾器要素...因此，請改用此參數：

const elem = $('#' + filterName);

現在，您將能夠綁定事件“ change”並獲得元素的值（.val（））

$("'#" + filterName + "'").change(function() { // wrong

單引號使元素選擇混亂（至少在我的小提琴中）。 您已經在第一步中聲明了filter元素-只需使用：

elem.change(function () {

希望能有所幫助

使用JQuery函數過濾php html文件中的表

問題描述

1 個解決方案

解決方案1
0 2019-08-03 21:51:49

使用JQuery函數過濾php html文件中的表

問題描述

1 個解決方案

解決方案1 0 2019-08-03 21:51:49

解決方案1
0 2019-08-03 21:51:49