ダイナミックテーブルにフィルタリングが適用されないのはなぜですか？

ドロップダウンメニューを使用して、tablefilter.js（http://tablefilter.free.fr/にある）を使用してフィルタリングできるさまざまなテーブルを表示したいとします。テーブルは表示されますが、フィルタリング機能はありません。ここでダイナミックテーブルにフィルタリングが適用されないのはなぜですか？

はtest.htmlというために私が持っているコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<head> 
<title>Test</title> 
<script type="text/javascript" language="javascript" src="TableFilter/tablefilter.js"> </script> 
<script type="text/javascript"> 
function sel_change(choice){ 
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else{// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
    document.getElementById("spn_table").innerHTML=xmlhttp.responseText; 
    var table1Filters = { 
    col_0: "select", 
    col_1: "select", 
    alternate_rows: true, 
    } 
    var tf01 = setFilterGrid(choice,table1Filters); 
    } 
    } 
    xmlhttp.open("GET","testphp.php?choice="+choice,true); 
    xmlhttp.send(); 
} 
</script> 
</head> 
<body> 
<form name="frm_summaries"> 
    <select id = "styleselect" name = "sel_choice" onchange = "sel_change(this[selectedIndex].text);"> 
    <option>hockey</option> 
    <option>baseball</option> 
    <option>basketball</option> 
    </select> 
</form> 
<p> 
<span id="spn_table"></span> 
</body> 
</html>

そして、ここではtestphp.phpのため、私が持っているコードです：

<?php 
$choice=$_GET["choice"]; 
if ($choice == "hockey"){ 
    echo "<table class=\"mytable TF\" id="; echo $choice; echo ">"; 
    echo "<thead><tr>"; 
    echo "<th>first name</th>"; 
    echo "<th>last name</th>"; 
    echo "</tr></thead>"; 
    echo "<tr>"; 
    echo "<td>Sidney</td>"; 
    echo "<td>Crosby</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Wayne</td>"; 
    echo "<td>Gretzky</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Mario</td>"; 
    echo "<td>Lemieux</td>"; 
    echo "</tr>"; 
    echo "</table>"; 
} else if ($choice == "baseball"){ 
    echo "<table class=\"mytable TF\" id="; echo $choice; echo ">"; 
    echo "<thead><tr>"; 
    echo "<th>first name</th>"; 
    echo "<th>last name</th>"; 
    echo "</tr></thead>"; 
    echo "<tr>"; 
    echo "<td>Babe</td>"; 
    echo "<td>Ruth</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Lou</td>"; 
    echo "<td>Gehrig</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Mickey</td>"; 
    echo "<td>Mantle</td>"; 
    echo "</tr>"; 
    echo "</table>"; 
} else if ($choice == "basketball"){ 
    echo "<table class=\"mytable TF\" id="; echo $choice; echo ">"; 
    echo "<thead><tr>"; 
    echo "<th>first name</th>"; 
    echo "<th>last name</th>"; 
    echo "</tr></thead>"; 
    echo "<tr>"; 
    echo "<td>Michael</td>"; 
    echo "<td>Jordan</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Larry</td>"; 
    echo "<td>Bird</td>"; 
    echo "</tr>"; 
    echo "<tr>"; 
    echo "<td>Wilt</td>"; 
    echo "<td>Chamberlain</td>"; 
    echo "</tr>"; 
    echo "</table>"; 
} 
?>

私が行方不明です何を教えてください。ありがとう。

出典

2011-12-04 Dave

問題は、これらのテーブルがページに動的に追加されているために発生している可能性があります。 tablefilter.jsは元のファイルの一部である既存のhtmlを調べています。私は、testphp.phpオプションを隠している3つの異なるdivに移動することをお勧めします。この方法では、オプションはすでにhtmlの一部です。ドロップダウンの選択肢が選択されたら、選択したdivのスタイルを変更して表示します。これにより、tablefilter.jsの一部を書き換える必要がなくなります。

P.S.あなたはあなたのPHPに非常に多くのエコーを必要としません。 1つはテーブルごとに行います。ハハ。

出典

2011-12-04 05:45:52

私はあなたが言及したように（隠されたdivで）考えていましたが、私が示した例よりも大きくなるので、3つのテーブルを一度に読み込まないことを望んでいました。エコーのヒントをありがとう。 – Dave

その場合、ajaxを使ってPHPテーブルを呼び出します。次に、jQueryを使用してテーブルをソートします。それはjqueryの少しだろうが、それは動作します。 –

ダイナミックテーブルにフィルタリングが適用されないのはなぜですか？

答えて

関連する問題