如何使 HTML 表格“类似于 Excel”可编辑多个单元格，即同时复制粘贴功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16292572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make HTML table "Excel-like" editable for multiple cells, i.e. simultaneous copy-paste features?
提问by CHEBURASHKA
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 contenteditableattribute as following:
我需要我的 HTML 表是可编辑的，以便用户插入的数据可以发送到服务器。但是，由于表的大小（50 行），如果我引入contenteditable如下属性，用户将不方便逐个插入数据点：
<table>
<tr><td><div contenteditable>editable</div></td><td><div contenteditable>editable</div></td></tr>
//...........
</table>
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?
如果可能的话，如何在不使用 dojo 等的情况下使我的表格可编辑，类似于 Excel 电子表格？我已经使用 ExcelAdapter 类在 Java 中完成了这项工作。有什么办法可以在 HTML 中做到这一点吗？
回答by tom
You can add a listener to the inputevent of each cell, and if the cell contains multiple data items split them across the next cells.
您可以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;
回答by Arun pandian M
you can achieve this easily by adding handsontable
您可以通过添加handsontable轻松实现这一点
change any div to a excel table
将任何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/
jsFiddle：http: //jsfiddle.net/jwtskyLa/
