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

Question

我有一張桌子，上面放着3個劇集。

我正在嘗試在第二列中插入單元格。

我將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 代碼

誰能幫我？

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