只显示表中的某些列

Display only certain columns in a table

本文关键字：显示      更新时间：2023-09-26

一直在寻找答案，但一无所获。我有一个代码，显示从服务器端genqueuesearch.php基于参数"rg1"拉表。每一行都有一个名为Queue的列，其中包含一个"rg1"字符串。表有几个列，但我的挑战是只显示4列。这是我的AJAX代码:

<html>
<head>
<script language="Javascript">
   function View(){
   ...
      xmlhttp.onreadystatechange=function(){
         if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("datatable").innerHTML=xmlhttp.responseText;    
         }
      }
      var parameters = "search="+"rg1";
      xmlhttp.open("POST", "http://drcsblr0165/genqueuesearch.php", true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlhttp.send(parameters); 
   }
</script>
</head>
   <body onload="View()">
      <div id="datatable" align="center"></div>
   </body>
</html>

尝试getElementsbyTagName，但我不知道我想要的列的标签名称。这是否需要先将表保存为文本文件?我非常感谢你的帮助，如果我不清楚的话，请问我。

既然你不能改变服务器给你的东西，那么我们只能用JavaScript来解决这个问题。我建议你使用jQuery，因为它会让事情变得更简单。

jQuery使用CSS选择器模式在DOM中查找元素。您可以利用它来选择要隐藏的表中的哪些列。您甚至可以选择特定的列，即使您不知道它们的名称。

假设您从服务器返回了这样的表，并将其放入<div id="datatable">: 

<div id="datatable" align="center">
    <table>
        <tr>
            <td>dataRow1Col1</td>
            <td>dataRow1Col2</td>
            <td>dataRow1Col3</td>
            <td>dataRow1Col4</td>
        </tr>
        <tr>
            <td>dataRow2Col1</td>
            <td>dataRow2Col2</td>
            <td>dataRow2Col3</td>
            <td>dataRow2Col4</td>
        </tr>
        <tr>
            <td>dataRow3Col1</td>
            <td>dataRow3Col2</td>
            <td>dataRow3Col3</td>
            <td>dataRow3Col4</td>
        </tr>
        <tr>
            <td>dataRow4Col1</td>
            <td>dataRow4Col2</td>
            <td>dataRow4Col3</td>
            <td>dataRow4Col4</td>
        </tr>
    </table>
</div>

例如，使用:nth-child选择器不需要您知道类名称，$('#datatable td:nth-child(3)').hide();将选择第3列并隐藏它。(参见示例:http://jsfiddle.net/Cjsua/)

你可以在jQuery文档中找到更多合适的选择器:http://api.jquery.com/category/selectors/

.hide()函数只是隐藏匹配的元素。

相关文章：