Wie man HTML-Tabelle "Excel-like" editierbar für mehrere Zellen, also der gleichzeitige kopieren-einfügen-Funktionen?

Muss ich meiner HTML-Tabelle bearbeitet werden, so dass Benutzer Daten eingefügt werden könnten, die an den server gesendet. Jedoch aufgrund der Tabelle Größe (50 Zeilen), wäre es nicht bequem für Benutzer, um Daten einzufügen Punkte, die man auch durch, wenn ich vorstellen contenteditable - Attribut wie folgt:

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

Wie kann ich meine Tabelle bearbeitet werden ähnlich einer excel-Tabelle, wenn möglich ohne Verwendung von dojo etc?
Ich habe dies getan in Java ExcelAdapter Klasse. Gibt es eine Möglichkeit, ich könnte es in HTML?

InformationsquelleAutor CHEBURASHKA | 2013-04-30
  1. 13

    Können Sie einen listener hinzufügen, um die input Ereignis von jeder Zelle und wenn die Zelle enthält mehrere Datenelemente teilen Sie diese über die nächsten Zellen.

    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/

    • Verwenden Sie die CSS-Eigenschaft white-space: pre-wrap zu bewahren Sequenzen von Leerzeichen
    InformationsquelleAutor tom
  2. 3

    können Sie erreichen dies einfach durch hinzufügen handsontable

    ändern, div, um eine excel-Tabelle

    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/

    InformationsquelleAutor Arun pandian M
Schreibe einen Kommentar