在特定日期使用jquery隱藏表列

Question

我在db.it中有一個名為view results的表有3列..我想在14天后隱藏它的第3列'Apply Recorrection'。例如：表顯示日期是2012-12-01。14天之后怎么能隱藏這個第3欄（參考此表的學生將無法看到2012-12-15表格。）....這是我的示例代碼：

<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代碼：

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

演示代碼鏈接： http ： //jsfiddle.net/ELRpv/4/

幫我編輯這段代碼來完成我的任務......

Answer 1

三件事：

1）您將要“關閉”第一行中的TR元素。

2）您也可以在第一行中定位TH元素：

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

3）如果您可以將“顯示日期”添加為數據日期屬性，那么使用某些JS可以計算今天和顯示日期之間的差異。

<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();    
}

這里的工作樣本：

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

Answer 2

這應該適用於你所要求的。 您只需要在table元素的data-date attr中設置開始日期

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();

Answer 3

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();       
    });
});

Answer 4

我添加了一個輔助函數，因此您可以傳入一個表和一個列號來隱藏

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/

Answer 5

最好的方法是在服務器端執行此操作。 - 如果dayOfMonth（date）> 14：不寫第3列。

如果您正在編寫HTML上的第3列並在頁面加載后隱藏或刪除它，那么有很多方法可以在任何人想要的情況下仍然看到第3列的HTML。

要在瀏覽器上執行此操作，您需要依賴服務器日期而不是客戶端日期，因為用戶可以更改它。

正如蒂姆建議的那樣，您可以將服務器日期設置為任何DOM元素的屬性值，以使日期可用於js。

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

如果日期超過14，請使用以下代碼隱藏列

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

如果您有任何疑問，請告訴我。