Come rendere la tabella HTML "simile a Excel" modificabile per più celle, ovvero le funzionalità di copia-incolla simultanee?

Question

Ho bisogno che la mia tabella HTML sia modificabile in modo che i dati inseriti dall'utente possano essere inviati al server. Tuttavia a causa delle dimensioni della tabella (50 righe) non sarebbe conveniente per gli utenti di inserire i punti dati uno ad uno se introduco attributo contenteditable come segue:

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

Come posso fare il mio tavolo sia modificabile simile a foglio di calcolo Excel, se possibile senza usare dojo ecc.? Ho fatto questo in Java usando la classe ExcelAdapter. C'è un modo per farlo in HTML?

Answer 1

È possibile aggiungere un ascoltatore all'evento input di ogni cella e, se la cella contiene più elementi di dati, suddividerli nelle celle successive.

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; 

Demo: http://jsfiddle.net/yRnkF/

Answer 2

si può raggiungere questo obiettivo facilmente con l'aggiunta di handsontable

cambiamento qualsiasi div a una tabella 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/