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

您应该注意一件事：

<td>不能contenteditable在 IE 中直接设置元素（以及其他元素）：请参阅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

一种方法是将 div 分配为 innerHTML：

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