javascript - 用鼠标拖动选择对 Angular 表格单元格

Question

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

 <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

假设您只想选择与矩形模式匹配的单元格:

您需要用更复杂的方法替换您的切片，因为您不想为一个范围着色，而是要为单元格数组的多个部分着色。

你的例子的数组看起来像

[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/