Question

我对jQuery有点问题。我希望你能用这个启发我。

我有一个使用PHP填充的表头。这是代码：

  <thead>
  <tr>
    <td rowspan="2"></td>
    <th colspan="12" scope="colgroup" class="month_header">January</th>
    <th colspan="12" scope="colgroup">February</th>
    <th colspan="12" scope="colgroup">March</th>
    <th colspan="12" scope="colgroup">April</th>
    <th colspan="12" scope="colgroup">May</th>
    <th colspan="12" scope="colgroup">June</th>
    <th colspan="12" scope="colgroup">July</th>
    <th colspan="12" scope="colgroup">August</th>
    <th colspan="12" scope="colgroup">September</th>
    <th colspan="12" scope="colgroup">October</th>
    <th colspan="12" scope="colgroup">November</th>
    <th colspan="12" scope="colgroup">December</th>
  </tr>
  <tr class="header_column_group">
    <?php for ($i = 1; $i < 13; $i++): ?>
      <th class="header_column_group_<?php echo $i; ?>">Qty Case</th>
      <th class="header_column_group_<?php echo $i; ?>">Qty Case Prev Year</th>
      <th class="header_column_group_<?php echo $i; ?>">Tot Sales</th>
      <th class="header_column_group_<?php echo $i; ?>">Total Sales Prev Year</th>
      <th class="header_column_group_<?php echo $i; ?>">Sales Growth</th>
      <th class="header_column_group_<?php echo $i; ?>">Forecast</th>
      <th class="header_column_group_<?php echo $i; ?>">Reached</th>
      <th class="header_column_group_<?php echo $i; ?>">Mix</th>
      <th class="header_column_group_<?php echo $i; ?>">BO Total</th>
      <th class="header_column_group_<?php echo $i; ?>">BO Previous Year</th>
      <th class="header_column_group_<?php echo $i; ?>">BO Rate</th>
      <th class="header_column_group_<?php echo $i; ?>">BO Growth</th>
    <?php endfor; ?>
  </tr>
  </thead>

现在，这是上面代码输出的屏幕截图：

正如您所看到的，我将生成12个月的标题，然后我将重复列。希望我能清楚地解释清楚。

现在这就是我想要做的，如果我单击Month标题，例如：January，我想突出显示/更改背景以红色下面的标题。（数量案例，上年的数量案例，Tot销售额）。

现在这是我的jQuery代码：

$(document).ready(function () {
  for (var i = 1; i <= 12; i++) {
    $('.month_header').on('click', function () {
      $(this).parent().next('tr').css('background', 'red');
    });
  }
});

但是，我的代码所做的是，当我点击例如1月时，它会突出显示月份下的所有标题，但实际上它应该只突出显示1月份的标题..请参阅屏幕截图：

我希望我能清楚地解释自己。希望你能引导我或引导我去哪里看。谢谢！

Answer 1

您可以使用:gt和:lt选择器来定位范围内的元素以及月份标题元素的索引

此外，您不需要迭代元素来附加相同的事件：

var $headerGroup = $('.header_column_group');
$('.month_header').on('click', function () {
    $headerGroup.css('background-color', '');
    $headerGroup.filter(':eq('+ ($(this).index() - 1)+')').css('background-color', 'red');//-1 to ignore first td with rowspan 2
});

Answer 2

谢谢 Milind 这个想法，我使用了slice()函数。我也删除了我的for循环。我会将你的答案标记为正确答案。

我终于解决了它。这是我的代码。

$(document).ready(function () {
  $('.month_header').on('click', function () {
    var index = $( ".month_header" ).index(this);

    /** January */
    if (index == 0)
    {
      $('.header_column_group th').slice(0, 13).css('background', 'red');
      $(this).attr('colspan',0);
    }
    /** February */
    if (index == 1)
    {
      $('.header_column_group th').slice(12, 25).css('background', 'red');
      $(this).attr('colspan',0);
    }

    /** Another if statement for other monts*/
  });
});

希望这也会对某人有所帮助。

JQuery - 选择下一个

2 个答案: