如何使HTML表格"Excel-like"可编辑为多个单元格,即同时复制粘贴功能？

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做到吗？

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/

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/