Question

我有一张带有3个thead的桌子。

我正在尝试在第二列中插入单元格。

我将insertCell函数设置如下：

cell = row.insertCell(2);

但它不起作用。

这是我的代码：

function add() {
    j++;
    count++;
    var table = document.getElementById('table0');
    var row = table.insertRow(-1);
    cell = row.insertCell(1);
    text = count;
    cell.appendChild(document.createTextNode(text));


}

这是我的JSFiddle code

任何人都可以帮助我吗？

Answer 1

您传递给row.insertCell(index)的索引必须小于或等于row.cells.length。在您的情况下，由于row是一个全新的行，row.cells.length为0，因此您必须通过0或-1。

考虑表格的HTML。在第二列中，如何为包含单个单元格的行编写HTML？你不能这样做！如果第二列中有一个单元格，则第一列中也必须有一个单元格。

在table中创建一个新行，第二列中有一个单元格：

var row = table.insertRow(-1);
var firstCell = row.insertCell(-1);
var secondCell = row.insertCell(-1);

为了给它第一列中没有单元格的外观，使用CSS来摆脱边框以及使它看起来像单元格的任何其他样式：

firstCell.className = "empty";

.empty {
    border: 0 none;
}

http://jsfiddle.net/54pmo8oy/14/

Answer 2

我不清楚这是否是您正在尝试做的事情，但希望它已接近尾声。每次单击该按钮都会向第二列添加一个新单元格：

(function () {
    var count = 1,
        add = function () {
            var table = document.getElementById('table0'),
                row = table.rows[0],
                cell = row.insertCell(1),
                text = count;
            cell.innerHTML = text;
            count++;
        };
    document.getElementsByTagName('button')[0].addEventListener('click', function () {
        add();
    });
    add();
}());

JSFiddle

在表中的特定列中插入单元格

2 个答案: