用javascript過濾表格

Question

我有一個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函數。

任何指導，不勝感激。

Answer 1

您可以將phpGrid或jqGrid用於ajax網格。 易於使用。

Answer 2

您可以采用以下基本方法
將復選框的值與用戶輸入的值進行匹配，並相應地使用javascript設置其（或父級tr ）不顯示/表行顯示。

Answer 3

如果你想自己寫的功能， 這里是使用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();
        })
    }
})

注意：這不是一個好方法，僅是必須說明如何解決的示例。