使用javascript过滤表

Filtering a table with javascript

本文关键字：过滤 javascript 使用      更新时间：2023-09-26

我有一个sql查询，我正在使用php将其作为表进行回显。

 $query="SELECT Name,
           Location,
           ID,
           Price
         From ProdTable
         where ID>=2300;"
$results = mysql_query($query);
while ($row = mysql_fetch_array($results)) {
    echo '<tr>';
    foreach($row as $field) {
        echo '<td>' . htmlspecialchars($field) . '</td>';
    }
    echo '</tr>';
}

我现在想做的是能够使用复选框过滤表格（默认显示所有位置，然后允许用户根据自己的意愿过滤），如下所示：

<input type="checkbox" name="location" value="newyork">New York
<input type="checkbox" name="location" value="chicago">Chicago
<input type="checkbox" name="location" value="orlando">Orlando
<input type="checkbox" name="location" value="losangeles">Los Angeles

但我想通过javascript来实现这一点，这样它就更动态了，用户不需要按下submit来进行过滤。我知道已经有了用于过滤的javascript工具包，但我想自己写一些javascript函数。

非常感谢任何指导。

您可以将phpGrid或jqGrid用于ajax网格。它很容易使用。

您可以采用以下基本方法
将复选框值与用户输入的值相匹配，并相应地使用javascript设置其（或父tr）显示无/表行。

如果您想自己编写函数，这里有一个使用jQuery的函数示例，它可能会有所帮助：

$('#val1').change(function(){
    if (this.checked){
        $('table tr').each(function(){
            var td = $(this).find('td')
            if(td.html() == 'value1')
                td.show();
        })
    }else{
        $('table tr').each(function(){
            var td = $(this).find('td')
            if(td.html() == 'value1')
                td.hide();
        })
    }
})

注意：这远不是一个好方法，只是一个必须说明如何解决的样本。

相关文章：