Japanese garden aka Pu La Deshpande Garden

To hide a column in a table

---

            
below is the code.

<script>
content=new Array()
function toggle(theChk) {
tb = document.getElementById("tb1");
chk=theChk.checked;
id = theChk.value;
for (i=0;i<tb.rows.length;i++) {
for (j=0;j<tb.rows[i].cells.length;j++) {
if (tb.rows[i].cells[j].id.indexOf("col"+id)==0) {
tb.rows[i].cells[j].style.display=(chk)?'block':'none'
/*

if (chk) tb.rows[i].cells[j].innerHTML=content[tb.rows[i].cells[j].id]
else {
content[tb.rows[i].cells[j].id]=tb.rows[i].cells[j].innerHTML;
tb.rows[i].cells[j].innerHTML=""
}
*/
}
}
}
}
</script>
<form>
<input type="checkbox" onClick="toggle(this)" value="A" checked>
<input type="checkbox" onClick="toggle(this)" value="B" checked>
<input type="checkbox" onClick="toggle(this)" value="C" checked>
</form>
<table id="tb1">
<tr>
<td id="colAcell0">ColA cell 0</td>
<td id="colBcell0">ColB cell 0</td>
<td id="colCcell0">ColC cell 0</td>
</tr>
<tr>
<td id="colAcell1">ColA cell 1</td>
<td id="colBcell1">ColB cell 1</td>
<td id="colCcell1">ColC cell 1</td>
</tr>
<tr>
<td id="colAcell2">ColA cell 2</td>
<td id="colBcell2">ColB cell 2</td>
<td id="colCcell2">ColC cell 2</td>
</tr>
</table>