为什么我的动态表没有过滤功能?

Why doesn't my dynamic table have filtering?

本文关键字：过滤 功能 我的 动态 为什么      更新时间：2023-09-26

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

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

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

注:php中不需要这么多echo。每张桌子一个就可以了。哈哈。

相关文章：