The table shows only three columns and hide the rest.... if you click the >:>> this shows the hidden rows on your right and <<< shows the hidden rows on your left.
It can be useful in creating a table that shows only a minimum number of columns to the user but the user can still see all the columns if he/she wanted to.
This is html code...
<html>
<head>
<title> Table</title>
<link rel="stylesheet" type="text/css" href="mycss.css"/>
<script type="text/javascript" src="myjs.js">
</script>
</head>
<body>
<table class="table_class" id="table_id">
<tr>
<th class="hideColumn"> Header 1</th>
<th class="hideColumn"> Header 2</th>
<th class="hideColumn"> Header 3</th>
<th class="hideColumn"> Header 4</th>
<th> Header 5</th>
<th> Header 6</th>
<th> Header 7</th>
</tr>
<tr>
<td class="hideColumn"> Content 1a</td>
<td class="hideColumn"> Content 2a</td>
<td class="hideColumn"> Content 3a</td>
<td class="hideColumn"> Content 4a</td>
<td> Content 5a</td>
<td> Content 6a</td>
<td> Content 7a</td>
</tr>
<tr>
<td class="hideColumn"> Content 1b</td>
<td class="hideColumn"> Content 2b</td>
<td class="hideColumn"> Content 3b</td>
<td class="hideColumn"> Content 4b</td>
<td> Content 5b</td>
<td> Content 6b</td>
<td> Content 7b</td>
</tr>
<tr>
<td class="hideColumn"> Content 1c</td>
<td class="hideColumn"> Content 2c</td>
<td class="hideColumn"> Content 3c</td>
<td class="hideColumn"> Content 4c</td>
<td> Content 5c</td>
<td> Content 6c</td>
<td> Content 7c</td>
</tr>
<tr>
<td class="hideColumn"> Content 1d</td>
<td class="hideColumn"> Content 2d</td>
<td class="hideColumn"> Content 3d</td>
<td class="hideColumn"> Content 4d</td>
<td> Content 5d</td>
<td> Content 6d</td>
<td> Content 7d</td>
</tr>
<tr>
<td class="hideColumn"> Content 1e</td>
<td class="hideColumn"> Content 2e</td>
<td class="hideColumn"> Content 3e</td>
<td class="hideColumn"> Content 4e</td>
<td> Content 5e</td>
<td> Content 6e</td>
<td> Content 7e</td>
</tr>
</table>
<div>
<span onclick="hideLastColumn();" style="cursor: pointer; background-color: red; color: white; padding: 0 10px;"> <<<</span>
<span onclick="hideFirstColumn();" style="cursor: pointer; background-color: red; color: white; padding: 0 10px;"> >>></span>
</div>
</body>
</html>
This is the css code.
.table_class {
border: 1px solid black;
}
.table_class tr {
border: 1px solid black;
}
.table_class tr td {
border: 1px solid black;
padding: 0 10px;
}
.table_class tr th {
border: 1px solid blue;
padding: 0 10px;
}
.hideColumn {
display: none;
}
.showColumn {
border: 1px solid blue;
}
this is the javascript code. i named it myjs.js as you can see in the header of the html.
var firstColumnIndex = 0;
var lastColumnIndex = 0;
var columnLength = 0;
var no_action = false;
//function for hiding the visible first column of the table
function hideFirstColumn(){
//get the table object
var table_obj = document.getElementById('table_id');
//if the firstColumnIndex and the lastColumnIndex is 0 then set the no_action variable to true
if(firstColumnIndex == 0 && lastColumnIndex == 0){
no_action = true;
}
//if the no_action variable is not true then perform the getting of the columns
if(no_action != true){
for(var x = 0; x < table_obj.rows.length; x++){
table_obj.rows[x].cells[firstColumnIndex].className = "showColumn";
table_obj.rows[x].cells[lastColumnIndex].className = "hideColumn";
}
//increment the firstColumnIndex and the lastColumnIndex by 1
firstColumnIndex = firstColumnIndex + 1;
lastColumnIndex = lastColumnIndex + 1;
}
}
//function for hiding the visible last column of the table
function hideLastColumn(){
//get the table object
var table_obj = document.getElementById('table_id');
//set the no_action variable to false
no_action = false;
if(firstColumnIndex == table_obj.rows[1].cells.length){
/* if you came to the very last column of the table your firstColumnValue will be set to the limit so you need to decrement it by 1 so that it will hide the last column again */
firstColumnIndex = firstColumnIndex - 1;
lastColumnIndex = lastColumnIndex - 1;
} else if(firstColumnIndex == 0 && lastColumnIndex == 0){
/*if the firstColumnIndex and lastColumnIndex is zero get the length of the cell and subtract it to one to hide the lastColumn*/
firstColumnIndex = table_obj.rows[1].cells.length - 1;
lastColumnIndex = firstColumnIndex - 3;
} else if(lastColumnIndex == 0) {
// if the first column of the table can be seen, take no action
} else {
/*if the firstColumnIndex and the lastColumnIndex has a value that is not zero decrement it until it reaches the firstColumn*/
firstColumnIndex = firstColumnIndex - 1;
lastColumnIndex = lastColumnIndex - 1;
}
//show all the column inside all the rows by looping on each row
for(var x = 0; x <= table_obj.rows[1].cells.length; x++){
table_obj.rows[x].cells[firstColumnIndex].className = "hideColumn";
table_obj.rows[x].cells[lastColumnIndex].className = "showColumn";
}
}
There it is. I know it is still unpolished it is because I have just created that code at this time. You can refactor that code if you like.
-
Posts
Thanks for sharing..Thanks for the post. It was so informative and helpful!lovely tutorial..!!!
ReplyDeletecheap web designer