javascript表格单元格选择

我想在我的html表格中实现excel表格选择功能

即，选择矩阵格式的单元格，如1x1、2x2、3x3等

请提供示例代码

抱歉，无法上载图像

---------
| 1 | 4 |
---------
| 2 | 3 |
---------

---

只需打开excel工作表，在一列中选择两个单元格（如图1和2所示），然后移动到右侧的单元格（单元格3），此时会自动选择上面的单元格（单元格4）。。。我需要相同的功能这就是你想要的吗？

（通过@pkaeding请求）

---

你可以用。似乎是个不错的选择。您也可以在这里找到一些演示。

这里是我制作的非jQuery UI解决方案：

演示：

JavaScript：

$('table td').hover(function() {
    for (var x = 0; x <= $(this).index(); x++) {
        for (var y = 0; y <= $(this).parent().index(); y++) {
            $(this).parent().parent().children().eq(y).children().eq(x).addClass('selected');
        }
    }
}, function() {
    $('table td').removeClass('selected');
});

table tr td {
    border: 1px solid grey;
    padding: 10px;
}

table tr td.selected {
    background-color: rgb(200, 200, 255);
}

<table>
    <tr><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></tr>
    <tr><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></tr>
    <tr><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></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

HTML：

$('table td').hover(function() {
    for (var x = 0; x <= $(this).index(); x++) {
        for (var y = 0; y <= $(this).parent().index(); y++) {
            $(this).parent().parent().children().eq(y).children().eq(x).addClass('selected');
        }
    }
}, function() {
    $('table td').removeClass('selected');
});

table tr td {
    border: 1px solid grey;
    padding: 10px;
}

table tr td.selected {
    background-color: rgb(200, 200, 255);
}

<table>
    <tr><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></tr>
    <tr><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></tr>
    <tr><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></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

现在你应该可以发布图片了。@rsenna，你应该将其作为答案发布，这样人们就可以对其进行投票，提问者也可以接受它。我认为它可能很好地回答了这个问题。此解决方案只是可视的，而不是实际选择的更改（window.getSelection（）不受影响）此解决方案只是可视的，而不是实际选择的更改（window.getSelection（）不受影响）