如何使 HTML 表格“类似 Excel”可编辑多个单元格，即同步复制粘贴功能？

Question

我需要我的 HTML 表格是可编辑的，以便用户插入的数据可以发送到服务器。但是由于表的大小（50行），如果我引入 contenteditable 属性，用户将不方便逐个插入数据点，如下所示：

 <table>
<tr><td><div contenteditable>editable</div></td><td><div contenteditable>editable</div></td></tr>
//...........
</table>

如果可能而不使用 dojo 等，如何使我的表类似于 excel 电子表格可编辑？我使用 ExcelAdapter 类在 Java 中完成了此操作。有什么办法可以用 HTML 实现吗？

原文由 CHEBURASHKA 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以向每个单元格的 input 事件添加一个侦听器，如果该单元格包含多个数据项，则将它们拆分到下一个单元格。

 function init()
{
    var tables = document.getElementsByClassName("editabletable");
    var i;
    for (i = 0; i < tables.length; i++)
    {
        makeTableEditable(tables[i]);
    }
}

function makeTableEditable(table)
{
    var rows = table.rows;
    var r;
    for (r = 0; r < rows.length; r++)
    {
        var cols = rows[r].cells;
        var c;
        for (c = 0; c < cols.length; c++)
        {
            var cell = cols[c];
            var listener = makeEditListener(table, r, c);
            cell.addEventListener("input", listener, false);
        }
    }
}

function makeEditListener(table, row, col)
{
    return function(event)
    {
        var cell = getCellElement(table, row, col);
        var text = cell.innerHTML.replace(/<br>$/, '');
        var items = split(text);

        if (items.length === 1)
        {
            // Text is a single element, so do nothing.
            // Without this each keypress resets the focus.
            return;
        }

        var i;
        var r = row;
        var c = col;
        for (i = 0; i < items.length && r < table.rows.length; i++)
        {
            cell = getCellElement(table, r, c);
            cell.innerHTML = items[i]; // doesn't escape HTML

            c++;
            if (c === table.rows[r].cells.length)
            {
                r++;
                c = 0;
            }
        }
        cell.focus();
    };
}

function getCellElement(table, row, col)
{
    // assume each cell contains a div with the text
    return table.rows[row].cells[col].firstChild;
}

function split(str)
{
    // use comma and whitespace as delimiters
    return str.split(/,|\s|<br>/);
}

window.onload = init;

演示：http: //jsfiddle.net/yRnkF/

原文由 tom 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过添加 handsontable 轻松实现此目的

将任何 div 更改为 excel 表格

var $container = $("#divid");
$container.handsontable({
data: getData(),
rowHeaders: true,
colHeaders: true,
contextMenu: true  //forces dom to use custom right click functionality like add row delete row add column etc
});

jsFiddle：http: //jsfiddle.net/jwtskyLa/

原文由 Arun pandian M 发布，翻译遵循 CC BY-SA 3.0 许可协议