Hiding and Un-hiding table rows with out using DIV tag
Usually people will use DIV tag to hide and un-hide the control from the html page dynamically. But we can also use pure Java script to hide the controls.
Here I used Java script to hide and un-hide html table rows. I hope this may help some people.
<SCRIPT type=text/javascript>
function showHideTR(tRow, no, image) {
var tbl,row,img;
if(document.getElementById && document.getElementsByTagName) { //1
tbl = document.getElementById('tblMain');
img = document.getElementById(image);
if(!tbl){
return;
}else{ //2
for (var x = 1; x <= no; x++){ //3
var rowId = tRow+'Child'+ x;
row = tbl.getElementsByTagName('tr')[rowId];
// alert(rowId);
// alert(row);
if(row) {
if(row.style.display != 'none') {
row.style.display = 'none';
if(img){
img.src = "authTable/icon_connect_plus1.gif";
}
} else {
try {
row.style.display = 'table-row';
} catch(e) {
row.style.display = 'block';
}
row.style.display = 'block';
if(img){
img.src = "authTable/icon_collapse_minus1.gif";
}
}
}
}//3end
}//2end
}//1 end
else if(document.all && document.all.tags) {
tbl = document.all.table1;
img = document.getElementById(image);
if(!tbl){
return;
}else{ //2
for (var x = 1; x <= no; x++){ //3
var rowId = tRow+'Child'+ x;
row = tbl.getElementsByTagName('tr')[rowId];
//alert(rowId);
//alert(row);
if(row) {
if(row.style.display != 'none') {
row.style.display = 'none';
if(img){
img.src = "authTable/icon_expand_end.gif";
}
} else {
try {
row.style.display = 'table-row';
} catch(e) {
row.style.display = 'block';
}
row.style.display = 'block';
if(img){
img.src = "authTable/icon_collapse_more.gif";
}
}
}
}//3end
}//2end
}
}
</SCRIPT>
<br/>
<form id="newUserForm" method="post" name="newUserForm">
<table name="tblMain" id="tblMain" width="100%">
<tb>
<tr bgcolor="#feefff">
<th width="11%">Modules</th>
<td align="center" valign="top" colspan=12><b>Roles</b></td> <!-- 4 * number of role) -->
</tr>
<tr bgcolor="#ffggff">
<td rowspan="2"></td>
<td align="center" colspan="4"><b>Admin</b></td> <!-- 12/3=4 here been used 3 may varie. So 3*4. 4 is constant-->
<td align="center" colspan="4"><b>publisher</b></td>
<td align="center" colspan="4"><b>Viewer</b></td>
</tr>
<tr>
<td align="center"><b>Create</b></td>
<td align="center"><b>Update</b></td>
<td align="center"><b>View</b></td>
<td align="center"><b>Delete</b></td>
<td align="center"><b>Create</b></td>
<td align="center"><b>Update</b></td>
<td align="center"><b>View</b></td>
<td align="center"><b>Delete</b></td>
<td align="center"><b>Create</b></td>
<td align="center"><b>Update</b></td>
<td align="center"><b>View</b></td>
<td align="center"><b>Delete</b></td>
</tr>
<!--Dynamic to be done from here -->
<!--Row 1 -->
<tr id='row'+'1'>
<td>
<A onclick="showHideTR('row'+'1', 2, 'row'+'1'+'Img'+'1');"
href=javascript:void(0)><img id='row1Img1' src="authTable/icon_collapse_minus1.gif" alt="+"/><b> Ananth</b></A>
</td>
<td align="center">
<input type="checkbox"></br>
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
</tr>
<!-- ChildRow 1-->
<tr id="row1Child1">
<td align="right">
<img src="authTable/icon_collapse_more.gif" alt="-"/> Data1
</td>
<td align="center">
<input type="checkbox"></br>
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
</tr>
<!-- -->
<!-- ChildRow 2-->
<tr id='row1Child2'>
<td align="right">
<img src="authTable/icon_collapse_end.gif" alt="-"/> Data2
</td>
<td align="center">
<input type="checkbox"></br>
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
<td align="center">
<input type="checkbox">
</td>
</tr>
<!-- -->
<tr><td bgcolor="#feefff" colspan="13">'</td></tr>
</tb>
</table>
</form>
</html>
Posts
No comments:
Post a Comment