用javascript获取TableHeader的cellIndex

Question

情况：我已经完全用javascript创建了一个html表头，现在我想添加一个删除列功能，该功能以单元格索引为参数。然而，每次我尝试获取创建的第个元素的单元格索引时，获得的索引都是-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);

}

Answer 1

文档指出，当单元格不属于tr时，cellIndex返回-1，所以我的猜测是这样的。

Answer 2

我建议您为您的"th"；元素，然后使用该id将其删除。

声明变量

let i = 0;然后

let th = document.createElement("th");
th.id = i++;

在您的删除中可能是

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