Hiding rows on a table based on a link on a row. Nothing much to talk about, except that this is actually quite an interesting piece of code. Simple but yet complex. Oxymoron i know, but anyhow note that the span tag has an id which corresponds to the row number of the row to height. It is also important to note that there should not be anything other than the value between the span tags. Most things such as styles can be controlled directly using CSS.
<script type="text/javascript">
var hide= true;
function toggleRows(tableId, rowId, tag){
tbl = document.getElementById(tableId);
navispan = document.getElementById(rowId);
var len = tbl.rows.length; if(tag.innerHTML.substring(0,4) == "Show") {
navispan.innerHTML = tag.innerHTML.substring(5); hide= false;
} else {
navispan.innerHTML = "Show " + tag.innerHTML; hide= true;
}
var vStyle = (hide)? "none":"";
tbl.rows[rowId].style.display = vStyle;
}</script>
<style>
.header {
text-align:left; width:100px;
}
.bodyText {
width:150x;
}
</style>
</head>
<body>
Click here to hide/show
<span id="0" onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span>
<span id="1" onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> <span id="2" onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span>
<br /><br />
<table id="myTable" style="width:400px; border:0px;">
<tbody>
<tr>
<td class="header"> <span onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span> </td>
<td class="bodyText"> This annotation Sucks </td>
<td class="bodyText"> This annotation is good </td>
</tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> </td>
<td class="bodyText"> </td> <td class="bodyText"> This annotation cannot make it. </td> </tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span> </td>
<td class="bodyText"> I love this phrase </td> <td class="bodyText"> This phrase is dumb. </td> </tr>
</tbody>
</table>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment