5

テーブルに行を追加する必要があります。ヘッダー行を手動で追加し、コンテンツをユーザーが編集できるようにしました。

現在、私は持っています

var table = document.getElementById("tableData");

    var add = 5;

    for (var i = 0; i < add; i++) {

        var row = table.insertRow(0);

        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);

        cell1.innerHTML = "New";
        cell2.innerHTML = "New";
    }

これは、行を追加する練習のためだけに使用しました。セルを編集可能にするには、「contenteditable」で内部に div を配置する必要があることを見てきました。すでに持っているコードにこれを追加するにはどうすればよいですか?

ありがとう

4

2 に答える 2

6

注意すべき点が 1 つあります。

<td>contenteditableIE で要素を直接設定することはできません: http://msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx

完全を期すために、これを行うにはいくつかの方法があります

var table = document.getElementById("tableData");

    var add = 5;

    for (var i = 0; i < add; i++) {

        var row = table.insertRow(0);

        var cell1 = row.insertCell(0);

        // Method 1 (Restricted in IE)
        cell1.innerHTML = "Method 1";
        cell1.setAttribute('contentEditable', 'true');

        // Method 2 (Restricted in IE)
        cell1.innerHTML = "Method 2";
        cell1.contentEditable = true;

        // Method 3 (All browsers)
        cell1.innerHTML = "<div contenteditable>Method 3</div>";

        // Method 4 (All browsers)
        var div1 = document.createElement('div');
        div1.innerHTML = "Method 4";
        cell1.appendChild(div1);
        div1.contentEditable = true;
    }
于 2013-04-26T09:24:58.167 に答える
2

1 つの方法は、div を innerHTML として割り当てることです。

cell1.innerHTML = "<div contenteditable='true'>New</div>";
于 2013-04-26T09:16:54.030 に答える