Hi there J_N,
and a warm welcome to these forums. :agree:
That code has a mildly familiar look even if nearly three years old. ;)
Here is an example that may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#table1 {
border:1px solid #999;
}
#table1 td {
width:2.8em;
height:1.25em;
border:1px solid #000;
text-align:center;
}
.hide {
display:none;
}
#container {
width:13em;
border:3px double #999;
margin-bottom:1em;
}
ul {
padding-top:0.5em;
padding-bottom:0.5em;
}
ul li {
margin-top:0.25em;
margin-bottom:0.25em;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
obj=document.getElementById('table1')
cell=obj.getElementsByTagName('td');
row=obj.getElementsByTagName('tr');
cols=cell.length/row.length //this is the number of table columns
test=new Array(cols)
for(c=0;c<test.length;c++) {
test[c]=0
}
links=document.getElementById('container').getElementsByTagName('li');
for(c=0;c<links.length;c++) {
links[c].id='lk'+c;
links[c].onclick=function() {
num=parseFloat(this.id.split('lk')[1])
removeColumn(num);
}
}
}
function removeColumn(num) {
obj.cellSpacing=0;
if(test[num]==0){
for(c=0;c<cell.length;c++) {
if(c%cols==num){
cell[c].className='hide';
document.getElementById('lk'+num).firstChild.nodeValue='replace column '+(num+1);
}
}
test[num]=1;
}
else {
if(test[num]=1){
for(c=0;c<cell.length;c++) {
if(c%(cols)==num){
cell[c].className='';
document.getElementById('lk'+num).firstChild.nodeValue='remove column '+(num+1);
}
}
test[num]=0;
}
}
obj.cellSpacing='3px';
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>remove column 1</li>
<li>remove column 2</li>
<li>remove column 3</li>
<li>remove column 4</li>
</ul>
</div>
<table id="table1"><tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr><tr>
<td>5</td><td>6</td><td>7</td><td>8</td>
</tr><tr>
<td>9</td><td>10</td><td>11</td><td>12</td>
</tr><tr>
<td>13</td><td>14</td><td>15</td><td>16</td>
</tr></table>
</body>
</html>