Question

我想使用下拉菜单显示可以使用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>";
}
?>

请告诉我我错过了什么。感谢。

Answer 1

问题很可能是因为这些表被动态添加到页面中。 tablefilter.js正在查看作为原始文件一部分的现有html。我建议只将testphp.php选项移动到隐藏的3个不同的div中。这样，选项已经是html的一部分。然后，当您在下拉选项中选择一个时，只需更改所选div的样式即可显示。这样可以避免重写tablefilter.js的部分内容。

P.S。你的php中不需要那么多的回声。一个人会为每张桌子做。哈哈。

为什么我的动态表没有过滤？

1 个答案: