仅显示表格中的某些列答案

【问题标题】：Display only certain columns in a table仅显示表格中的某些列
【发布时间】：2018-01-16 07:36:45
【问题描述】：

一直在寻找答案，但一无所获。我有一个代码显示从基于参数“rg1”的服务器端 genqueuesearch.php 中提取的表。每行都有一个名为 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 但我不知道我想要的列的标签名称。这是否需要先将表格保存到文本文件？感谢您的所有帮助，如果我不清楚，请询问。

【问题讨论】：

您是否有理由希望通过 AJAX 传递表格 HTML 的字符串表示形式？我建议以 JSON 格式传递数据，然后在 JavaScript 中您可以创建表格 HTML 并控制要输出的列。
我是 AJAX 新手，从未使用 JSON 编码。您能否详细说明或显示示例代码？我愿意学习 JSON 来实现这一点。感谢您的指导。
刚刚阅读 JSON。我正在从在 HTML 上显示表格的远程服务器中提取数据，因此不知道有关我要显示的列的任何信息。如果桌子在我的服务器上，这很容易。我在这里错过了什么吗？
那么，您是说您无法控制远程服务器发送的数据格式吗？
嗯，responseText 只是显示了大约 20 列的表格。我只想显示 4。表是通过使用搜索参数“rg1”在远程服务器 drcsblr0165 上打开 genqueuesearch.php 生成的。所以不，我无法控制远程服务器发送的数据格式。我的方法错了吗？我应该先将表格保存在文本文件中，这样我才能看到列的 ID 标签（如果有标签的话）？

标签： javascript html ajax responsetext

【解决方案1】：

由于您无法更改服务器为您提供的内容，因此我们仅限于使用 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(); 将选择第三列并将其隐藏。（参见示例：http://jsfiddle.net/Cjsua/）

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

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

【讨论】：

玩弄这个 $('#datatable td:nth-child(3)').hide();这就是我要找的东西，但是我的代码在哪里 $('#datatable td:nth-child(3)').hide();插入？抱歉，这是个愚蠢的问题，但我是菜鸟。
@user2430338 一个好地方是在页面上创建表格之后，所以在document.getElementById("datatable").innerHTML=xmlhttp.responseText;这一行之后
现在我无法访问服务器，所以我使用的是我创建的表格，其中包含我在单元格中输入的数据。我插入了 $('#datatable td:nth-child(3)').hide();在 document.getElementById("datatable").innerHTML=xmlhttp.responseText 之后；它没有隐藏第三列 =(.
您是否收到任何错误，例如验证 jQuery 是否正常工作？通过查看浏览器的开发者控制台进行检查。
如何进入浏览器的开发者控制台？我在 OSX 10.8.3 上使用 Safari 6.0.4。没有收到任何错误。它只是显示包含所有列及其单元格数据的表格。第三列没有隐藏。