仅显示表格中的某些列 [英] Display only certain columns in a table
问题描述
曾经寻找答案，但没有找到答案.我有一个代码，显示基于参数"rg1"从服务器端genqueuesearch.php中提取的表.每行都有一个名为Queue的列，其中包含"rg1"字符串.该表有几列，但我的挑战是仅显示4列.这是我的AJAX代码:
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". Each row has a column called Queue with an "rg1" string in it. The table has several columns but my challenge is displaying only 4 columns. Here is my AJAX code:
<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，但是我不知道我想要的列的标签名称.这是否需要先将表保存到文本文件?感谢您的帮助，请询问是否不清楚.
Tried getElementsbyTagName but I don't know the tag names for the columns I would like. Does this require saving the table to a text file first? I appreciate all your help and please ask if I'm not clear.
推荐答案
由于您无法更改服务器提供的内容，因此我们只能使用JavaScript解决此问题.我确实建议您使用jQuery，因为它会使您变得更简单.
Since you can't alter what the server is giving you, then we are restricted to solving this with JavaScript only. I do suggest you use jQuery because it'll make things much simpler for you.
jQuery使用CSS选择器模式在DOM中查找元素.您可以利用它来选择要隐藏表中的哪些列.即使您不知道特定列的名称，您也可以选择它们.
jQuery utilizes CSS selector pattern for finding elements in the 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.
说，您从服务器取回了一个这样的表，并将其放在了<div id="datatable">中:
Say, you get back a table like this from the server and you've put it inside your <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选择器不需要知道 class 名称，$('#datatable td:nth-child(3)').hide();将选择第3列并将其隐藏. (请参见示例: http://jsfiddle.net/Cjsua/)
For example, using the :nth-child selector doesn't require you to know the class name, $('#datatable td:nth-child(3)').hide(); will select the 3rd column and hide it. (see example: http://jsfiddle.net/Cjsua/)
您可能会在jQuery文档中找到更合适的选择器: http://api.jquery.com/类别/选择器/
You may find more suitable selectors on the jQuery documentation: http://api.jquery.com/category/selectors/
.hide()函数只是隐藏匹配的元素.
The .hide() function simply hides the elements matched.
这篇关于仅显示表格中的某些列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
