Hide a table column using jquery in a particular date

Question

I have table called view results in my db.it has 3 columns.. I want hide its 3rd column 'Apply Recorrection ' after 14 days.Example : Table show date is 2012-12-01.After 14 days how can I hide this 3rd column (IN 2012-12-15 table will not visible to students who refer this table..).... Here is my sample code:

<table border=1>
    <tr><th>Student ID</th><th>Grade</th><th>Apply Recorrection</th>
    <tr><td>RS211</td><td>C</td><td>Click Here</td></tr>
    <tr><td>RS221</td><td>B</td><td>Click Here</td></tr>
        <tr><td>RS251</td><td>F</td><td>Click Here</td></tr>
</table>

JS code:

$("table td:nth-child(3)").hide();

Demo code link: http://jsfiddle.net/ELRpv/4/

Help me to edit this code to do my task...

This should probably be done on the serverside, yet there is no code showing how you get the results from the DB and build the HTML. — adeneo, Dec 13 '12 at 05:29
here ii posted a sample code..all data getting from db...it has result issue date also..after 14 days I want hide this 3rd column... — Dong Li, Dec 13 '12 at 05:34
if u give a solution for this code I can appply it for my real code.... — Dong Li, Dec 13 '12 at 05:34
You probably have a loop on the serverside that creates the columns and inserts the values, this is where you should compare the dates to check if more than 14 days have passed, and if so don't output that row etc. — adeneo, Dec 13 '12 at 05:37
I want do my task in this js code..can't I do it in javascript??? — Dong Li, Dec 13 '12 at 05:42
Well, where is the date you're suppose to compare to, somewhere in the table? How do you expect to know if 14 days have passed without a date, and javasciprt uses the date on the users computer, so if that's not correct, it does'nt work ? — adeneo, Dec 13 '12 at 05:57
The users can still get access to the raw html, so I hope this is not sensitive data. Hiding it will not be secure! — ErikE, Dec 13 '12 at 06:10

hansvedo · Accepted Answer · 2012-12-13T06:10:53.887

Three things:

1) You'll want to "close" the TR element in the first row.

2) You can target the TH elements in the first row as well:

$("table td:nth-child(3), table th:nth-child(3)").hide();

3) If you can add the "show date" as a data-date attribute then using some JS you can calculate the difference between today and show date.

<table border=1 data-date="2012-12-01">
    <tr><th>Student ID</th><th>Grade</th><th>Apply Recorrection</th></tr>
    <tr><td>RS211</td><td>C</td><td>Click Here</td></tr>
    <tr><td>RS221</td><td>B</td><td>Click Here</td></tr>
    <tr><td>RS251</td><td>F</td><td>Click Here</td></tr>
</table>

// Today
var time_now = $.now();

// The date set in the table's data-date.
var date_start = new Date($('table').attr('data-date'));

// The table's date turned into microseconds.
var time_start = date_start.getTime();

// The difference in days.
var date_difference = parseInt((time_now - time_start ) / (86400000));

// If the date difference is greater than X, hide the column.
if(date_difference > 12){
    $("table td:nth-child(3), table th:nth-child(3)").hide();    
}

Working sample here:

http://jsfiddle.net/hansvedo/TuLMC/

this is not a solution for my problem frnd....I want hide this column after a specific time period....imagine my php code has varible $issudate="2012-12-01" ..then after 14 days how can I hide this column...plzz update ur fiddle code and give me a solution — Dong Li, Dec 13 '12 at 05:44
glad it works. I updated from using the class attribute to the more semantically/html5 correct data-date attribute as per @tim's answer. — hansvedo, Dec 13 '12 at 06:07

tim · Answer 2 · 2012-12-13T05:55:15.817

1

This should work for what you're asking. You just need to set the start date in a data-date attr on the table element

http://jsfiddle.net/ELRpv/14/

<table border=1 data-date="12/01/2012">
    <tr><th>Student ID</th><th>Grade</th><th>Apply Recorrection</th>
    <tr><td>RS211</td><td>C</td><td>Click Here</td></tr>
    <tr><td>RS221</td><td>B</td><td>Click Here</td></tr>
    <tr><td>RS251</td><td>F</td><td>Click Here</td></tr>
</table>


var baseDate = new Date($("table").data('date'));
var expireDate = new Date().setDate(baseDate.getDate() + 14);
var curDate = new Date();

if (curDate > expireDate)
    $("table td:nth-child(3)").hide();

edited Dec 13 '12 at 05:55

answered Dec 13 '12 at 05:46

tim

1,708
14
16

This really should be done server side though since it will always need to be hidden after 14 days. If the user has JS disabled, the column will still be there. – tim Dec 13 '12 at 05:52
thanks so much for ur great help frnd....but frnd it has little bit problem..when I change ur date'12/01/2012" to 11/28/2012..still table column will hide....plzz fix this smalll error...i think u can fixed soon... – Dong Li Dec 13 '12 at 05:56
Good use of the "data-" attribute, I'm going to update my answer accordingly. – hansvedo Dec 13 '12 at 06:02
Off by one error, just change the 14 to 13 and it'll work - comparing equality with JS dates is goofy. See [here](http://stackoverflow.com/questions/4587060/determining-date-equality-in-javascript) for more info. And glad to help, don't forget to accept the answer :) – tim Dec 13 '12 at 06:04

score 0 · Answer 3 · answered Dec 13 '12 at 05:33

0

HTML:

<table border=1>
    <tr><td>Student ID</td><td>Grade</td><td>Apply Recorrection</td></tr>
    <tr><td>RS211</td><td>C</td><td>Click Here</td></tr>
    <tr><td>RS221</td><td>B</td><td>Click Here</td></tr>
    <tr><td>RS251</td><td>F</td><td>Click Here</td></tr>
</table>

JS:

$(document).ready(function(){
    $('table').find('tr').each(function(){
       $(this).find('td').eq(2).hide();       
    });
});

answered Dec 13 '12 at 05:33

RRikesh

14,112
5
49
70

this is not a soluition for my problem frnd....I want hide this column after a specific time period....imagine my php code has varible $issudate="2012-12-01" ..then after 14 days how can I hide this column... – Dong Li Dec 13 '12 at 05:39
The best way to do it is by PHP so that it is not even served to the browser. – RRikesh Dec 13 '12 at 05:47

score 0 · Answer 4 · answered Dec 13 '12 at 05:37

0

I added a helper function so you can pass in a table and a column number to hide

function hideColumn($table, columnNumber){
    $table.find('td:nth-child('+columnNumber+'), th:nth-child('+columnNumber+'),').hide();
}

function showColumn($table, columnNumber){
    $table.find('td:nth-child('+columnNumber+'), th:nth-child('+columnNumber+'),').show();
}


var $myTable = $('table');

hideColumn($myTable, 3);

Updated fiddle: http://jsfiddle.net/ELRpv/5/

answered Dec 13 '12 at 05:37

Chris Barr

29,851
23
95
135

this is not a solution for my problem frnd....I want hide this column after a specific time period....imagine my php code has varible $issudate="2012-12-01" ..then after 14 days how can I hide this column...plzz update ur fiddle code and give me a solution – Dong Li Dec 13 '12 at 05:43
Are you expecting someone to leave this page open for 14 days, and then it just hides the column? If this is really what you want, the best solution is to do this server-side instead of with the client. – Chris Barr Dec 13 '12 at 05:50

score 0 · Answer 5 · answered Dec 13 '12 at 06:12

Best way to do this would be to do this on server side. - if dayOfMonth(date)>14 : do not write 3rd column.

If you are writing the 3rd column on the HTML and hiding or removing it once page loads, there are n number of ways to still see the HTML of the 3rd column in case anyone wants to.

To do this on the browser, you'll need to rely on server date not on client's date as it can be changed by users.

As tim suggested, you can set server date as value of an attribute to any DOM element to make date available to js.

<table border=1 data-date="12/01/2012">

And use following code to hide column if date more than 14

var dt=new Date($("table").data('date'));
if(dt.getDate()>14)
  $("table td:nth-child(3)").remove();

Let me know if you have any questions.

Hide a table column using jquery in a particular date

5 Answers5

Linked