使用javascript获取TableHeader的cellIndex

情境：我已经完全用javascript创建了一个html表头，现在我想添加一个删除列功能，该功能将单元格索引作为参数。但是，每次我尝试获取所创建的第h个元素的单元索引时，得到的索引都是-1。一旦我通过标记名获取元素，就不再存在获取标题的各个单元格索引的问题

非常感谢您的帮助

let headerFragment = document.createDocumentFragment();

//Append counter at the beginning of each row
let number_th = document.createElement("th")
let number_txt = document.createTextNode('#');
number_th.appendChild(number_txt);
headerFragment.appendChild(number_th);
//Append active checkbox
let active_th = document.createElement("th")
let active_txt = document.createTextNode('Active');
active_th.appendChild(active_txt);
headerFragment.appendChild(active_th);

//Append all other data fields
if (headersArray){
    headersArray.forEach((header, index) => {

        let th = document.createElement("th");

        //Create text identifier
        let txt = document.createTextNode(headersArray[index]);
        //Create delete column button
        let delete_column = document.createElement("p");
        delete_column.innerHTML = "Delete";

        delete_column.onclick = function() {
            //Delete column - here is the problem 
            alert(th.cellIndex) //alerts -1
            deleteColumn(th.cellIndex);
        }

        th.appendChild(txt);
        th.appendChild(delete_column);
        headerFragment.appendChild(th);

    });

    //Final append
    tableHeader.appendChild(headerFragment);
}

如果我运行此函数，所有索引都会正确检索

function myFunction() {
var x = document.getElementsByTagName("th");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
    txt = txt + "The index of Cell "+(i+1)+" is: "+x[i].cellIndex+"<br>";
}

alert(txt);

函数myFunction（）{
var x=document.getElementsByTagName（“th”）；
var txt=“”；
var i；
对于（i=0；i”；
}
警报（txt）；

---

}

当单元格不属于

tr

时，

cellIndex

返回-1的状态，因此我猜情况就是这样。

当单元格不属于

tr

时，

cellIndex

返回-1的状态，所以我的猜测是这样的。

我建议您动态地为“th”元素分配一个id，然后使用该id删除它

声明一个变量

设i=0
然后

在你的删除可能是

        delete_column.onclick = function() {
            let elementToDelete = document.getElementById(th.id);
            elementToDelete.parentNode.removeChild(elementToDelete);
        }

我建议您动态地为“th”元素分配一个id，然后使用该id删除它

声明一个变量

设i=0
然后

在你的删除可能是

        delete_column.onclick = function() {
            let elementToDelete = document.getElementById(th.id);
            elementToDelete.parentNode.removeChild(elementToDelete);
        }