web-dev-qa-db-ja.com

HTMLテーブルを複数のセルで「Excelのような」編集可能にする方法、つまり同時コピー＆ペースト機能はどうすればよいですか？

ユーザーが挿入したデータをサーバーに送信できるように、HTMLテーブルを編集可能にする必要があります。ただし、テーブルのサイズ（50行）のため、次のようにcontenteditable属性を導入すると、ユーザーがデータポイントを1つずつ挿入するのは不便です。

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

可能であれば、dojoなどを使用せずに、テーブルをExcelスプレッドシートのように編集できるようにするにはどうすればよいですか？私はこれをJavaでExcelAdapterクラスを使用して行いました。HTMLでそれを行う方法はありますか？

htmlhtml-tablecontenteditable
10
CHEBURASHKA

各セルの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/

14
tom

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/

3
Arun pandian M