Скрыть строки в таблице в зависимости от текущего месяца с помощью jQuery

0

Я создал таблицу HTML, которая кодирует столбец "месяц". То, что я хотел бы сделать, это показать только строки, соответствующие текущему месяцу (это я уже выполнил), но также и предыдущий месяц. Спасибо заранее. Просто FYI, я новичок в 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 ответ

1
Лучший ответ

Измените это:

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

к этому:

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

Это сумасшедший рушится, поскольку способ, которым вы делаете это в цикле, не оптимизирован, это просто показывает вам пример того, что вы могли бы сделать. Это скрывает их всех, а затем показывает те, которые вы хотите. Вы могли бы поочередно получить все из них, пройти через них и скрыть их каждый отдельно, не скрывая тех, которые вы хотите.

Лучше:

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

Это на самом деле лучше в том, что он скрывает строку, поскольку она настраивает ее, когда она обнаруживает ее не в "шоу" прохладного клуба.

PS, вам не нужно делать этот месячный массив внутри цикла.each... вы могли бы просто сделать это за пределами этого цикла.

Поделиться
  • 0
    Большое спасибо, Ник, все работает отлично. Спасибо за предложение относительно массива месяцев, я тоже это изменил.
  • 0
    Ник. Еще раз спасибо за вашу помощь, но у меня есть другая проблема. Мы находимся в январе (Month [0], это означает, что переменная n будет иметь отрицательное значение «month [theDate.getMonth () - 1]». В этом случае условие не будет работать. Я бы попробовал Math.abs, но это дало бы мне месяц работы. Любое предложение? Спасибо заранее. PS. Я попробовал switch / case, но он стал довольно длинным, и я уверен, что есть лучший вариант там.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню