Question

我想在我的html表格中使用excel表格选择功能。

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

请提供示例代码。

抱歉无法上传图片......

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

只需打开excel表并在一列中选择两个单元格（如图1中的单元格1和单元格2），然后移动到右侧的单元格（单元格3），此处自动选择上部单元格（单元格4） ......我需要相同的功能

Answer 1

这是您要找的东西：http://jqueryui.com/demos/selectable/#display-grid？

Answer 2

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

DEMO ：http://jsfiddle.net/Blender/rxT5z/10/

<强>的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');
});

<强> CSS ：

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

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

<强> HTML ：

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

Answer 3

（通过@pkaeding请求）

您可以使用jquery.sheet。似乎是一个不错的选择。在那里你也会找到一些演示。

javascript表格单元格选择

3 个答案: