Search results for 'Style Tag'. 1 post(s) found.
2009/08/28 08:45
To hide/show area of web page without re-loading a page
2009/08/28 08:45 in HTML, Javascript
You can simply show and hide by changing style.display property. By calling below javascript function from the header row of your table, you can make your table collapsible.
<script language="text/javascript">
function ExpandCollapseTable(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
</script>
function ExpandCollapseTable(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
</script>
Following is HTML body calling above function.
<body>
<table border=1>
<tr onclick="ExpandCollapseTable(this);" style="cursor:pointer;">
<td colspan=3>
Table Header(click to expand-collapse)
</td>
</tr>
<tr>
<td style="width: 100px">1</td>
<td style="width: 100px">2</td>
<td style="width: 100px">3</td>
</tr>
<tr>
<td style="width: 100px">4</td>
<td style="width: 100px">5</td>
<td style="width: 100px">6</td>
</tr>
<tr>
<td style="width: 100px">7</td>
<td style="width: 100px">8</td>
<td style="width: 100px">9</td>
</tr>
</table>
</body>
<table border=1>
<tr onclick="ExpandCollapseTable(this);" style="cursor:pointer;">
<td colspan=3>
Table Header(click to expand-collapse)
</td>
</tr>
<tr>
<td style="width: 100px">1</td>
<td style="width: 100px">2</td>
<td style="width: 100px">3</td>
</tr>
<tr>
<td style="width: 100px">4</td>
<td style="width: 100px">5</td>
<td style="width: 100px">6</td>
</tr>
<tr>
<td style="width: 100px">7</td>
<td style="width: 100px">8</td>
<td style="width: 100px">9</td>
</tr>
</table>
</body>
Another posts included in "HTML, Javascript"
| To compare two HTML tables on web page in real time (0) | 2009/08/28 |
| Photoshop script programming in Javascript (0) | 2009/09/14 |
| Displays the html tags without rendering on a webpage (0) | 2009/08/28 |
| Javascript based query parser for AJAX application (0) | 2009/08/28 |
| To get web browser capability (0) | 2009/08/28 |
| Photo thumbnail viewer implement in javascript (0) | 2009/08/28 |
| Javascript Confirmation (0) | 2009/08/22 |
Prev
Rss Feed