使用jQuery根据当前月份隐藏表中的行

时间:2013-12-12 21:18:33

标签: jquery html

我创建了一个包含“月”列的HTML表。我想要做的只是显示与当前月份匹配的行(我已经完成了),还有前一个月。谢谢提前。仅供参考,我是jQuery的新手。 这就是我到目前为止:

HTML:

<table class="theTable">
<tr>
    <th class="theMonth">Month</th>
    <th>Value</th><th>Month Number</th>
</tr>
<tr>
    <td class="theMonth">October</td>
    <td>1</td>
    <td>1</td>
</tr>  
<tr>
    <td class="theMonth">November</td>
    <td>1</td>
    <td>2</td>
</tr>  
<tr>
    <td class="theMonth">December</td>
    <td>1</td>
    <td>3</td>
</tr>  
<tr>
    <td class="theMonth">January</td>
    <td>1</td>
    <td>4</td>
</tr> 
<tr>
    <td class="theMonth">February</td>
    <td>1</td>
    <td>5</td>
</tr>
<tr>
    <td class="theMonth">March</td>
    <td>1</td>
    <td>6</td>
</tr>
<tr>
    <td class="theMonth">April</td>
    <td>1</td>
    <td>7</td>
</tr>
<tr>
    <td class="theMonth">May</td>
    <td>1</td>
    <td>8</td>
</tr>
<tr>
    <td class="theMonth">June</td>
    <td>1</td>
    <td>9</td>
</tr>
<tr>
    <td class="theMonth">July</td>
    <td>1</td>
    <td>10</td>
</tr>
<tr>
    <td class="theMonth">August</td>
    <td>1</td>
    <td>11</td>
</tr>
<tr>
    <td class="theMonth">September</td>
    <td>1</td>
    <td>12</td>
</tr>
</table>

JQUERY:

$(function(){monthColumn();});
function monthColumn()
{
    rows = [];
    $('.theMonth').each(function()
    {  
        var rowText = $(this).text();
        rows.push(rowText);

        var theDate=new Date();
        var month=new Array();
        month[0]="October";
        month[1]="November";
        month[2]="December";
        month[3]="January";
        month[4]="February";
        month[5]="March";
        month[6]="April";
        month[7]="May";
        month[8]="June";
        month[9]="July";
        month[10]="August";
        month[11]="September";
        var n = month[theDate.getMonth()-1]; 
        var m = month[theDate.getMonth()-2] //Testing
        if ( rowText == n)
        {
            $('.theMonth').not(this).parent().hide();
        }
    });
 }

1 个答案:

答案 0 :(得分:1)

改变这个:

$('.theMonth').not(this).parent().hide();

到此:

$('.theMonth').parent().hide();
$(this).parent().show();
$(this).parent().prev().show();

这是一个疯狂的derpy hack,因为你在循环中这样做的方式没有优化,这只是为了向你展示你可以做什么的一个例子。这会隐藏它们然后显示你想要的那些。你也可以选择所有这些,遍历它们,然后分别隐藏它们而不是隐藏你想要的那些。

更好:

if ( rowText !== n && rowText !== m)
  {
    $(this).parent().hide();
  }

这实际上更好,因为当它检测到它不在&#34;中显示&#34;它隐藏行时正在设置它。酷俱乐部。

PS,你不需要在.each循环中制作那个月数组......你可以在循环之外进行一次。