Display only certain columns in a table

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". 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>

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.

Is there a reason why you want to pass string representation of your table HTML via AJAX? I would suggest passing the data in JSON format, then in JavaScript you can create your table HTML and also have control as to which columns you would like to output. — Amy, May 28 '13 at 22:29
I'm new to AJAX, and never coded in JSON. Can you please elaborate or show a sample code? I'm willing to learn JSON to achieve this. Thank you for this direction. — user2430338, May 28 '13 at 23:43
Just read up on JSON. I am pulling data from a remote server that displays a table on HTML and therefore do not know any info regarding the columns I want to display. This is easy if the table is on my server. Am I missing something here? — user2430338, May 29 '13 at 03:05
So, are saying you have no control over the data format that is being sent by the remote server? — Amy, May 29 '13 at 06:13
Well, responseText simply displays the table with about 20 columns. I only want to display 4. Table is generated by opening genqueuesearch.php on remote server drcsblr0165 with search parameter "rg1". So no, I have no control over the data format that is being sent by the remote server. Is my approach wrong? Should I save the table on a text file first so I can see the ID tag of the columns (if there even are tags)? — user2430338, May 29 '13 at 12:22

score 0 · Answer 1 · answered May 29 '13 at 19:08

0

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 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.

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>

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/)

You may find more suitable selectors on the jQuery documentation: http://api.jquery.com/category/selectors/

The .hide() function simply hides the elements matched.

answered May 29 '13 at 19:08

Amy

7,388
2
20
31

Played around with this $('#datatable td:nth-child(3)').hide(); and it's what I'm looking for, but where in my code is $('#datatable td:nth-child(3)').hide(); inserted? Sorry it's a silly question, but I'm a noob. – user2430338 May 29 '13 at 20:07
@user2430338 A good place is after you have created your table on the page, so after the line `document.getElementById("datatable").innerHTML=xmlhttp.responseText;` – Amy May 29 '13 at 20:20
Right now I have no access to the server so I'm using a table I created with data inputted by me in the cells. I inserted $('#datatable td:nth-child(3)').hide(); after document.getElementById("datatable").innerHTML=xmlhttp.responseText; and it's not hiding the 3rd column =(. – user2430338 May 29 '13 at 20:42
Are you getting any errors, as in verify if jQuery is working or not? Check by looking in the developer console of your browser. – Amy May 29 '13 at 20:58
How do I get to the developer console of my browser? I'm using Safari 6.0.4 on OSX 10.8.3. Not getting any errors. It simply displays the table with all the columns and their cell data. 3rd column is not hiding. – user2430338 May 29 '13 at 21:00
Had my coworker run the file at work and he said he gets this error: Webpage error details: User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Wed, 29 May 2013 20:59:02 UTC Message: Access is denied. Line: 24 Char: 4 Code: 0 – user2430338 May 29 '13 at 21:04
sweetamylase, i created table.php that is opened by xmlhttp.open("POST", "table.php", true);. Everything is the same from the original code except this. table.php generates the table. Does this make a difference? I modified $('#datatable td:nth-child(3)').hide(); several times but 3rd column is still displayed. – user2430338 May 29 '13 at 21:58
Go [here to enable Safari developer tools](http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html). The `$('#datatable td:nth-child(3)').hide()` will only work if it executes after the page has finished loading. You may have to wrap that code in `$(document).ready(function() { $('#datatable td:nth-child(3)').hide(); });` so that it waits for the page to be loaded/ready before executing. – Amy May 30 '13 at 06:44

Display only certain columns in a table

1 Answers1

Linked