为什么我的动态表没有过滤功能？
我想使用下拉菜单来显示可以使用 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>";
}
?>
请告诉我我缺少什么。谢谢。
I want to use a drop down menu to display different tables that can be filtered using tablefilter.js (found on http://tablefilter.free.fr/). The tables show up, but they do not have filtering capabilities.
Here is the code I have for 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>
And here is the code I have for 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>";
}
?>
Please tell me what I am missing. Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
该问题很可能是由于这些表是动态添加到页面的这一事实引起的。 tablefilter.js 正在查看作为原始文件一部分的现有 html。我建议将 testphp.php 选项移动到隐藏的 3 个不同的 div 中。这样，选项就已经是 html 的一部分了。然后，当在下拉选项中选择一个时，只需更改要显示的所选 div 的样式即可。这将避免您必须重写 tablefilter.js 的部分内容。
PS 你的 php.ini 中不需要那么多 echo。每桌一个就够了。哈哈。
The problem is most likely arising from the fact that these tables are dynamically added to the page. The tablefilter.js is looking through your existing html that is part of the original file. I recommend just moving the testphp.php options into 3 different divs that are hidden. This way, the options are already part of the html. Then, when one is selected in your drop down choices, just simply change the style of the selected div to show. This will avoid you having to rewrite parts of tablefilter.js.
P.S. you don't need so many echo's in your php. One will do for each table. haha.