如何 select 纠正 jQuery 中的元素

Question

我创建了表格。 我想在某个范围内添加类。

我想要的结果如下所示，

在我的工作中，有些单元格不能正常工作，我想修复它。

什么是错误的点？ 我该如何解决？

谢谢

 $(function() { $("td").click(function() { $(this).toggleClass('red'); index = $("td").index(this); $("tr.color").slice(index + 1, index + 3).each(function() { $(this).addClass('red'); }); }); });

 table { border-collapse: collapse; } td { padding: 5px; border: solid black 1px; cursor: pointer; }.red { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> </tr> </table>

Answer 1

不清楚你想要什么，但这符合你的形象

我注释掉了单击的单元格并删除了 +1 我还在着色之前删除了 class

 $(function() { $("td").click(function() { // $(this).toggleClass('red'); $("tr.color").removeClass("red"); index = $("td").index(this); $("tr.color").slice(index, index + 3).each(function() { $(this).addClass('red'); }); }); });

 table { border-collapse: collapse; } td { padding: 5px; border: solid black 1px; cursor: pointer; }.red { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> <td class="color"></td> </tr> </table>