Creating JavaScript-Based Table Rulers - The table ruler application’s full source code
(Page 4 of 4 )
As I anticipated in the section that you just read, here’s the definition of a brand new (X)HTML file, which contains all of the source code required to correctly implement this JavaScript-based table ruler. Take a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on building a table ruler</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 20pt Arial, Helvetica, sans-serif;
color:#000;
}
table{
width: 60%;
border: 1px solid #000;
border-collapse: collapse;
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
th{
background: #9cf;
}
th,td{
border: 1px solid #000;
border-collapse: collapse;
padding: 2px;
}
.ruler{
background: #fc0;
}
</style>
<script language="javascript">
// example on implementing table ruler with one table
function displayTableRuler(){
// get ruled table
var table=document.getElementById('ruledtable');
if(!table){return};
// get all <tr> elements of ruled table
var trs=table.getElementsByTagName('tr');
// loop over <tr> elements of ruled table
for(var i=0;i<trs.length;i++){
// display table ruler
trs[i].onmouseover=function(){
this.className='ruler';
}
// remove table ruler
trs[i].onmouseout=function(){
this.className='';
}
}
}
// display table ruler when the web page has been loaded
window.onload=function(){
if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
// display table ruler
displayTableRuler();
}
}
</script>
</head>
<body>
<h1>Example on building a table ruler</h1>
<table id="ruledtable">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alejandro</td>
<td>Gervasio</td>
<td>alejandro@domain.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@domain.com</td>
</tr>
<tr>
<td>Susan</td>
<td>Norton</td>
<td>susan@domain.com</td>
</tr>
<tr>
<td>Marian</td>
<td>Wilson</td>
<td>marian@domain.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Smith</td>
<td>mary@domain.com</td>
</tr>
<tr>
<td>Amanda</td>
<td>Bears</td>
<td>amanda@domain.com</td>
</tr>
<tr>
<td>Jodie</td>
<td>Foster</td>
<td>jodie@domain.com</td>
</tr>
<tr>
<td>Laura</td>
<td>Linney</td>
<td>laura@domain.com</td>
</tr>
<tr>
<td>Alice</td>
<td>Dern</td>
<td>alice@domain.com</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Aniston</td>
<td>jennifer@domain.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Since the above code sample is indeed very simple to follow, you shouldn’t have major problems understanding how it functions. Of course, there’s plenty of room to improve the functionality of this table ruler and even for reducing its source code. But this process will be left to you as homework, in case you may want to spend some time playing with this simple yet useful web application.
Final thoughts
In this second installment of the series, I demonstrated how simple it is to create a table ruler that relies only on unobtrusive JavaScript to highlight the rows of a selected HTML table. Since all the modules that comprise this web application reside in different layers, it’s extremely easy to change its visual appearance and its behavior as well.
In the upcoming tutorial, I’ll be discussing how to build a table ruler that works with multiple HTML tables, taking into account that I already showed you how to use it with only one. So, if you’re interested in learning the full details of how this improved functionality will be achieved, don’t miss the next part!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
