¿Cómo hacer editable la tabla HTML como “Excel” para varias celdas, es decir, funciones de copiar y pegar simultáneamente?

Necesito que mi tabla HTML sea editable para que los datos insertados por el usuario puedan enviarse al servidor. Sin embargo, debido al tamaño de la tabla (50 filas) no sería conveniente para los usuarios insertar puntos de datos uno por uno si introduzco el atributo contenteditable como sigue:

  //........... 
editable
editable

¿Cómo puedo hacer que mi tabla sea editable similar a la hoja de cálculo de Excel, si es posible sin usar dojo, etc.? He hecho esto en Java usando la clase ExcelAdapter. ¿Hay alguna forma de hacerlo en HTML?

Puede agregar un escucha al evento de input de cada celda, y si la celda contiene varios elementos de datos, divídalos en las siguientes celdas.

 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(/
$/, ''); 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|
/); } window.onload = init;

Demostración: http://jsfiddle.net/yRnkF/

Usted puede lograr esto fácilmente mediante la adición de handsontable

cambiar cualquier div a una tabla de 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/