11

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

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

如果可能不使用 dojo 等，如何使我的表格可编辑，类似于 excel 电子表格？我已经使用 ExcelAdapter 类在 Java 中完成了这项工作。有什么办法可以在 HTML 中做到这一点？

4

2 回答 2

16

您可以为每个单元格的事件添加一个侦听器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/

于 2013-04-30T09:12:37.550 回答
5

你可以通过添加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/

于 2017-07-19T07:32:05.910 回答