在特定日期使用jquery隐藏表列
我在db.it中有一个名为view results的表有3列..我想在14天后隐藏它的第3列’Apply Recorrection’。例如:表显示日期是2012-12-01。14天之后怎么能隐藏这个第3栏(参考此表的学生不会看到2012-12-15表格。)….这是我的示例代码:
Student ID Grade Apply Recorrection RS211 C Click Here RS221 B Click Here RS251 F Click Here
JS代码:
$("table td:nth-child(3)").hide();
演示代码链接: http : //jsfiddle.net/ELRpv/4/
帮我编辑这段代码来完成我的任务……
三件事:
1)您将要“关闭”第一行中的TR元素。
2)您也可以在第一行中定位TH元素:
$("table td:nth-child(3), table th:nth-child(3)").hide();
3)如果您可以将“显示日期”添加为数据日期属性,那么使用某些JS可以计算今天和显示日期之间的差异。
Student ID Grade Apply Recorrection RS211 C Click Here RS221 B Click Here RS251 F Click Here
// 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(); }
这里的工作样本:
这应该适用于你所要求的。 您只需要在table元素的data-date attr中设置开始日期
Student ID Grade Apply Recorrection RS211 C Click Here RS221 B Click Here RS251 F Click Here
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();
HTML:
Student ID Grade Apply Recorrection RS211 C Click Here RS221 B Click Here RS251 F Click Here
JS:
$(document).ready(function(){ $('table').find('tr').each(function(){ $(this).find('td').eq(2).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);
更新小提琴: http : //jsfiddle.net/ELRpv/5/
最好的方法是在服务器端执行此操作。 – 如果dayOfMonth(date)> 14:不写第3列。
如果您正在编写HTML上的第3列并在页面加载后隐藏或删除它,那么有很多方法可以在任何人想要的情况下仍然可以看到第3列的HTML。
要在浏览器上执行此操作,您需要依赖服务器日期而不是客户端日期,因为用户可以更改它。
正如蒂姆建议的那样,您可以将服务器日期设置为任何DOM元素的属性值,以使日期可用于js。
如果日期超过14,请使用以下代码隐藏列
var dt=new Date($("table").data('date')); if(dt.getDate()>14) $("table td:nth-child(3)").remove();
如果您有任何疑问,请告诉我。