Add onClick event to document.createElement("th")
JavascriptHtml TableJavascript Problem Overview
I am dynamically adding columns to a table by using document.createElement("th")
var newTH = document.createElement('th');
Is there a way to set an onClick
attribute for this so a user can delete the column by clicking on the header? Any help would be great. If this is not possible, is it possible to put something in
newTH.innerHTML
to make it work?
Javascript Solutions
Solution 1 - Javascript
var newTH = document.createElement('th');
newTH.innerHTML = 'Hello, World!';
newTH.onclick = function () {
this.parentElement.removeChild(this);
};
var table = document.getElementById('content');
table.appendChild(newTH);
Working example: http://jsfiddle.net/23tBM/
You can also just hide with this.style.display = 'none'
.
Solution 2 - Javascript
var newTH = document.createElement('th');
newTH.onclick = function() {
//Your code here
}
Solution 3 - Javascript
var newTH = document.createElement('th');
newTH.setAttribute("onclick", "removeColumn(#)");
newTH.setAttribute("id", "#");
function removeColumn(#){
// remove column #
}
Solution 4 - Javascript
var newTH = document.createElement('th');
newTH.addEventListener( 'click', function(){
// delete the column here
} );