如何制作HTML表格“类似Excel的”可编辑多个单元格，即同时复制粘贴功能？ [英] How to make HTML table "Excel-like" editable for multiple cells, i.e. simultaneous copy-paste features?

问题描述

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

I need my HTML table to be editable so that user inserted data could be sent to the server. However due to the table's size (50 rows) it would not be convenient for users to insert data points one-by one if I introduce contenteditable attribute as following:

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

如何在不使用dojo等情况下让我的表格可以编辑成类似于Excel电子表格的格式？
我使用ExcelAdapter类在Java中完成了这项工作。有什么方法可以在HTML中完成吗？

How can I make my table be editable similar to excel spreadsheet, if possible without using dojo etc? I have done this in Java using ExcelAdapter class. Is there any way I could do it in HTML?

推荐答案

您可以将侦听器添加到输入每个单元格的事件，并且如果单元格包含多个数据项，则将它们分割到下一个单元格中。

You can add a listener to the input event of each cell, and if the cell contains multiple data items split them across the next cells.

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/

这篇关于如何制作HTML表格“类似Excel的”可编辑多个单元格，即同时复制粘贴功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！