仅显示表格中的某些列

Question

Been searching for answers but finding none. 一直在寻找答案，但没有找到答案。 I have a code that displays a table pulled from a server-side genqueuesearch.php based on a parameter "rg1". 我有一个代码，显示基于参数“ rg1”从服务器端genqueuesearch.php中提取的表。 Each row has a column called Queue with an "rg1" string in it. 每行都有一个名为Queue的列，其中包含“ rg1”字符串。 The table has several columns but my challenge is displaying only 4 columns. 该表有几列，但我的挑战是仅显示4列。 Here is my AJAX code: 这是我的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>

Tried getElementsbyTagName but I don't know the tag names for the columns I would like. 尝试使用getElementsbyTagName，但是我不知道我想要的列的标签名称。 Does this require saving the table to a text file first? 这是否需要先将表保存到文本文件？ I appreciate all your help and please ask if I'm not clear. 感谢您的帮助，请询问是否不清楚。

Answer 1

Since you can't alter what the server is giving you, then we are restricted to solving this with JavaScript only. 由于您无法更改服务器为您提供的服务，因此我们仅限于使用JavaScript解决此问题。 I do suggest you use jQuery because it'll make things much simpler for you. 我确实建议您使用jQuery，因为它会使您变得更简单。

jQuery utilizes CSS selector pattern for finding elements in the DOM. jQuery利用CSS选择器模式在DOM中查找元素。 You can leverage it to select which columns in the table you'd like to hide. 您可以利用它来选择要隐藏表中的哪些列。 You can even select specific columns even if you don't know the name of them. 您甚至可以选择特定的列，即使您不知道它们的名称。

Say, you get back a table like this from the server and you've put it inside your <div id="datatable"> : 假设您从服务器取回了一个这样的表，并将其放入了<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>

For example, using the :nth-child selector doesn't require you to know the class name, $('#datatable td:nth-child(3)').hide(); 例如，使用:nth-child选择器不需要您知道类名$('#datatable td:nth-child(3)').hide(); will select the 3rd column and hide it. 将选择第三列并将其隐藏。 (see example: http://jsfiddle.net/Cjsua/ ) （请参见示例： http : //jsfiddle.net/Cjsua/ ）

You may find more suitable selectors on the jQuery documentation: http://api.jquery.com/category/selectors/ 您可能会在jQuery文档中找到更合适的选择器： http : //api.jquery.com/category/selectors/

The .hide() function simply hides the elements matched. .hide()函数只是隐藏匹配的元素。

仅显示表格中的某些列

问题描述

1 个解决方案

解决方案1
0 2013-05-29 19:08:56

仅显示表格中的某些列

问题描述

1 个解决方案

解决方案1 0 2013-05-29 19:08:56

解决方案1
0 2013-05-29 19:08:56