First, reference JQuery and create the dynamic list of column names. Then design a checkbox accordingly and hook up onclick event for each:
<script type="text/javascript" src="JS/jquery-1.3.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tblExample th").each(function() {
var iIndex = $(this).closest("th").prevAll("th").length;
var colName = $(this).html();
$("#divColumns")
.append(
$(document.createElement("input")).attr({
id: iIndex
,name: iIndex
,value: colName
,type: 'checkbox'
,checked:true
})
.click( function( event )
{
var cbox = $(this)[0];
ShowHideColumn(cbox.id, !cbox.checked);
} )
)
.append(
$(document.createElement('label')).attr({
'for': iIndex
})
.text( colName )
).
append(" ");
});
$("#tblExample th").click(function() {
var iIndex = $(this).closest("th").prevAll("th").length;
ShowHideColumn(iIndex, true);
});
function ShowHideColumn(iIndex, isHide)
{
try{
var display = "table-cell";
if(isHide == true) display = "none";
$("#tblExample").find("tr").each(function() {
$(this).find("td:eq(" + iIndex + ")").css("display", display);
$(this).find("th:eq(" + iIndex + ")").css("display", display);
});
}
catch(e) { alert(e);}
}
$("#tblExample th").mouseover(function() {
$(this).css('cursor','pointer');
});
});
</script>
And here is the implementation of HTML markups in body section:
<div id="divColumns">
Put a yes/no check on each column name below to show/hide column correspondingly:<br />
</div>
<br />
Or you can click on header to hide the column at once:<br />
<table id="tblExample" cellpadding="0" cellspacing="0" border="1" style="border:solid 1px gray;">
<thead>
<tr style="background-color:Gray;">
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr><td>0001</td><td>Henry</td><td>35</td></tr>
<tr><td>0002</td><td>Lucky Luke</td><td>33</td></tr>
<tr><td>0003</td><td>Winly</td><td>30</td></tr>
</tbody>
</table>
RESULTS:
Try to uncheck the "Age" checkbox and see how it works. Here's the result:
Happy coding,
No comments:
Post a Comment