The follwing code can be used to dynamically delete columns in a table using HTML and Javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
td {
background-color: #CCCCCC;
}
-->
</style>
<script type="text/javascript">
function deleteC(c){
var root = c.parentNode.parentNode;//tbody or table - correction if tbody is not present
var allRows = root.getElementsByTagName('tr');// rows collection in the table
var aCells = c.parentNode.getElementsByTagName('td')//cells collection in this row
for(var j=0;j<aCells.length;j++){
if(c==aCells[j]){var q=j;break}//gets the index of this cell in this row
}
for(var i=0;i<allRows.length;i++){
allRows[i].removeChild(allRows[i].getElementsByTagName('td')[q]);//removes the correspondent cells with the same index in their rows
}
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>c0 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
<td>c1 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
<td>c2 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
<td>c3 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
</tr>
<tr>
<td>c0</td>
<td>c1</td>
<td>c2</td>
<td>c3</td>
</tr>
</tbody>
</table>
</body>
Send Message
Advertise