将 onClick 事件添加到 document.createElement("th")答案

【问题标题】：Add onClick event to document.createElement("th")将 onClick 事件添加到 document.createElement("th")
【发布时间】：2012-06-16 13:35:04
【问题描述】：

我正在使用document.createElement("th")向表中动态添加列

var newTH = document.createElement('th');

有没有办法为此设置onClick 属性，以便用户可以通过单击标题来删除该列？任何帮助都会很棒。如果这不可能，是否可以在

中放入一些东西

newTH.innerHTML

让它工作？

【问题讨论】：

标签： javascript html-table

【解决方案1】：

var newTH = document.createElement('th');
newTH.innerHTML = 'Hello, World!';
newTH.onclick = function () {
    this.parentElement.removeChild(this);
};

var table = document.getElementById('content');
table.appendChild(newTH);

工作示例：http://jsfiddle.net/23tBM/

您也可以使用this.style.display = 'none' 隐藏。

【讨论】：

这成功删除了标题，知道如何删除它下面的单元格吗？
@daniellanger 这变得更复杂了。
我能以某种方式附加这样的元素吗？ var html = "my dynamic element"+newTH+"WOW!"; other_el.innerHTML = html;

【解决方案2】：

var newTH = document.createElement('th');
newTH.onclick = function() {
      //Your code here
}

【讨论】：

谢谢，创建了这个事件！关于在函数中隐藏该元素的简单方法有什么想法吗？它没有 ID 或类，这有点困难
@daniellanger 看看我的回答。

【解决方案3】：

var newTH = document.createElement('th');
newTH.setAttribute("onclick", "removeColumn(#)");
newTH.setAttribute("id", "#");

function removeColumn(#){
// remove column #
}

【讨论】：

【解决方案4】：

var newTH = document.createElement('th');
newTH.addEventListener( 'click', function(){
  // delete the column here
} );

【讨论】：