动态添加行到表格并使内容可编辑。

Question

我需要向表格中添加行，我已经手动添加了标题行，并使内容可由用户编辑。

目前我有：

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。我应该如何将其加入到已经有的代码中？谢谢！

- jimminybob

Answer 1

请注意以下事项：

在IE浏览器中，<td>元素（以及其他一些元素）不能直接设置为可编辑状态：请参见此链接 为了完整起见，有多种方法可以实现这个功能。

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;
    }

- Terry Young

---

感谢提供这么多不同的方法，非常有用。 - jimminybob

Answer 2

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

cell1.innerHTML = "<div contenteditable='true'>New</div>";

- Michael Besteck