如何更改单击的单元格和列中接下来的三个单元格的颜色？

Question

我有这个代码：

<table>
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
    </tr>
    <tr>
        <td>Item 3</td>
        <td>Item 4</td>
    </tr>
    <tr>
        <td>Item 5</td>
        <td>Item 6</td>
    </tr>
</table

$("td").click(function(){
    var cell = $(this);
    var index = $(cell).index();
    $(cell).closest('tr').next().children().eq(index).toggleClass('red');
});

但它不会更改第一个 selected 单元格，我需要 select 在接下来的两行中再添加两个单元格。

Answer 1

尝试使用 for() 循环计算点击的单元格索引：

$(document).on('click', 'td', function() {
  var that = $(this);
  var i = that.index();
  var y = that.closest('tr').index();
  var n = y + 3;
  that.closest('table').find('td').removeClass('red');
  for (m=y;m<=n;m++) {
    that.closest('table').find('tr').eq(m).find('td').eq(i).addClass('red');
  }
});

td {
  background-color:green;
  width: 100px;
  height: 70px;
}
td.red {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 2

试试这个解决方案，它可能对您有所帮助。

$("table td").on("click", function(){
    var $this = $(this),
        current = $this.index(),
        len = current+2;

    // remove classes
    $("table td").removeClass("hover").removeClass("hover-next");

    // Add class to the current td
    $this.addClass("hover");

    // Add class to next three tds
    for(var i = current; i<= len; i++){
        $("table td").eq(i+1).addClass("hover-next")
    }
});

Demo Link

如何更改单击的单元格和列中接下来的三个单元格的颜色？

How can I change color of clicked cell AND next three in column?

jquery

html-table