Question

我有一张4x3的表格，我觉得很难处理对角线表单元格的选择。我使用此代码作为基础http://jsfiddle.net/5VXDt/1/。但是，当我点击表格单元格并沿对角线方向拖动时，也会标记不必要的单元格。例如，如果我选择B和F单元格，将标记更多单元格。 A，E和I也是如此。我如何只选择仅对角线的表格单元格？

 <table id="table">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>J</td> 
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>B</td>
  </tr>
  <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>K</td>      
  </tr>
</table>

js和css代码相同

Answer 1

假设您只想选择与矩形图案匹配的单元格：

您需要使用更复杂的方法更换slice，因为您不想为范围着色，而是要对单元格数组的多个部分进行着色。

您的示例的数组类似于

[A, B, C, D, E, F, G, H, I]

当用户开始在索引2（B）处拖动并拖动到5（F）时，您的代码会将范围从2颜色调整为5。其中包括3（D）。

因此，您需要计算开始和结束位置的列和行偏移量，而不是简单地计算范围。

如果每一行和每一列都有一个固定的大小（在你的例子3中），这就变得有点容易计算了：

var column = index % 3; 和 var row = Math.floor(index / 3);

然后，您只需从每列的起始行迭代到结束行（在起始列和结束列之间）。

您可以查看此快速示例代码：

http://jsfiddle.net/5VXDt/537/

使用鼠标拖动选择对角表格单元格

1 个答案: