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?
This question is related to
javascript
html-table
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'.
var newTH = document.createElement('th');
newTH.addEventListener( 'click', function(){
// delete the column here
} );
var newTH = document.createElement('th');
newTH.onclick = function() {
//Your code here
}
var newTH = document.createElement('th');
newTH.setAttribute("onclick", "removeColumn(#)");
newTH.setAttribute("id", "#");
function removeColumn(#){
// remove column #
}
Source: Stackoverflow.com