使用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