Introduction : some time we need to hide and show the table collumn according to requiredment. here i am explain this tutorial with simple example.here in explain table with four colluman and four checkbox the collumn can be show by selecting the checkbox and click on the submit button otherwise the collumn can be hide.
Screen Shot: Before selecting the Checkbox
Screen Shot : Afrer select the checkbox and click on submit button:
Below is given Jquery code for hide and show the collumn :
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
function getstate() {
if ($(ckfirst).is(':checked') == true) {
$('#CKTable td:nth-child(1),#CKTable th:nth-child(1)').show();
}
else {
$('#CKTable td:nth-child(1),#CKTable th:nth-child(1)').hide();
}
if ($(cksecond).is(':checked') == true) {
$('#CKTable td:nth-child(2),#CKTable th:nth-child(2)').show();
}
else {
$('#CKTable td:nth-child(2),#CKTable th:nth-child(2)').hide();
}
if ($(ckthird).is(':checked') == true) {
$('#CKTable td:nth-child(3),#CKTable th:nth-child(3)').show();
}
else {
$('#CKTable td:nth-child(3),#CKTable th:nth-child(3)').hide();
}
if ($(ckforth).is(':checked') == true) {
$('#CKTable td:nth-child(4),#CKTable th:nth-child(4)').show();
}
else {
$('#CKTable td:nth-child(4),#CKTable th:nth-child(4)').hide();
}
}
$(document).ready(function () {
$("#btSubmit").click(function () {
getstate();
});
});
</script>
Now add the html code with table and Checkbox. here using the checkbox id we can hide the table header collumn and the table td by nth child attribute. and according to requiredment by default collumn can hide and show by changing the condition using the if else like below.
<body onload="getstate()">
<table id="CKTable" border="1" cellspacing="3" width="2">
<thead>
<tr>
<th name="first">First</th>
<th name="second">Second</th>
<th name="third">Third</th>
<th name="forth">Forth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<div id="dvChkBox">
<input type="checkbox" name="first" id="ckfirst">first
<input type="checkbox" name="second" id="cksecond">second
<input type="checkbox" name="third" id="ckthird">third
<input type="checkbox" name="forth" id="ckforth">forth<br />
</div>
<div id="dvbtn">
<input id="btnSubmit" type="button" onclick="getstate();" value="Save" />
</div>
</body>
Screen Shot: Before selecting the Checkbox
Screen Shot : Afrer select the checkbox and click on submit button:
Below is given Jquery code for hide and show the collumn :
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
function getstate() {
if ($(ckfirst).is(':checked') == true) {
$('#CKTable td:nth-child(1),#CKTable th:nth-child(1)').show();
}
else {
$('#CKTable td:nth-child(1),#CKTable th:nth-child(1)').hide();
}
if ($(cksecond).is(':checked') == true) {
$('#CKTable td:nth-child(2),#CKTable th:nth-child(2)').show();
}
else {
$('#CKTable td:nth-child(2),#CKTable th:nth-child(2)').hide();
}
if ($(ckthird).is(':checked') == true) {
$('#CKTable td:nth-child(3),#CKTable th:nth-child(3)').show();
}
else {
$('#CKTable td:nth-child(3),#CKTable th:nth-child(3)').hide();
}
if ($(ckforth).is(':checked') == true) {
$('#CKTable td:nth-child(4),#CKTable th:nth-child(4)').show();
}
else {
$('#CKTable td:nth-child(4),#CKTable th:nth-child(4)').hide();
}
}
$(document).ready(function () {
$("#btSubmit").click(function () {
getstate();
});
});
</script>
Now add the html code with table and Checkbox. here using the checkbox id we can hide the table header collumn and the table td by nth child attribute. and according to requiredment by default collumn can hide and show by changing the condition using the if else like below.
<body onload="getstate()">
<table id="CKTable" border="1" cellspacing="3" width="2">
<thead>
<tr>
<th name="first">First</th>
<th name="second">Second</th>
<th name="third">Third</th>
<th name="forth">Forth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<div id="dvChkBox">
<input type="checkbox" name="first" id="ckfirst">first
<input type="checkbox" name="second" id="cksecond">second
<input type="checkbox" name="third" id="ckthird">third
<input type="checkbox" name="forth" id="ckforth">forth<br />
</div>
<div id="dvbtn">
<input id="btnSubmit" type="button" onclick="getstate();" value="Save" />
</div>
</body>
Sign up here with your email
ConversionConversion EmoticonEmoticon