In this tutorial we will explore the html table, and retrieve and manipulate the table cells and rows.
Objective: We have a table , which depicts two product comparison side by side and our objective is to segregate rows /features that match or doesn't match, by a means of applying a styled row ( basically coloring the row ) , as we choose a set of radio button. See the demo to understand it fully if it is not clear at the bottom of the page.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="mootools-core-1.4.5-full-compat.js"></script>
<script>
window.addEvent('domready', function(){
$('myForm').getElements('input[name=choice').addEvent('change',function(event){
checkme(event.target.get('value'));
});
checkme=function(vari){
Array.each($('target').getElements('tbody td:nth-child(2)'),function(index,ele){
var parent=index.getParent();
if(vari=='Yes'){
if( index.get('html')==parent.getElement('td:last-child').get('html')){
parent.set('class','similar');
}else{
parent.removeProperties('class');
}
}else{
if(index.get('html')!=parent.getElement('td:last-child').get('html')){
parent.set('class','dissimilar');
}else{
parent.removeProperties('class');
}
}
});
}
});
</script>
<style>
div{
float:left;
padding: 5px;
}
select {
width:120px;
}
.dissimilar{
background-color: lightcoral;
}
.similar{
background-color: greenyellow;
}
</style>
</head>
<body>
<form id="myForm" method="get" name="myForm6">
<p>
<input name="choice" type="radio" value="Yes" />Highlight Similar</p>
<p>
<input name="choice" type="radio" value="No" />Highlight Dissimilar</p>
</form>
<table id="target">
<thead>
<tr>
<th>
Feature List
</th>
<th>
Canon 5d Mark 3
</th>
<th>
Canon T3i
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sensor Type</td>
<td>CMOS</td>
<td>CMOS</td>
</tr>
<tr>
<td>Sensor Size</td>
<td>Full frame 36.0x24.0mm</td>
<td>APS-C 22.3x14.9mm</td>
</tr>
<tr>
<td>Sensor Crop factor</td>
<td>1x</td>
<td>1.6x</td>
</tr>
<tr>
<td>True resolution</td>
<td>22.1 MP</td>
<td>17.9 MP</td>
</tr>
<tr>
<td>Touch screen</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>Flips out</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Live view</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Lens availability</td>
<td>156 lenses</td>
<td>197 lenses</td>
</tr>
<tr>
<td>Waterproof</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>Weather sealed</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Format</td>
<td>1080p @ 30fps</td>
<td>1080p @ 30fps</td>
</tr>
<tr>
<td>Image stabilization</td>
<td>None</td>
<td>None</td>
</tr>
<tr >
<td>Supports RAW</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>GPS</td>
<td>No</td>
<td>No</td>
</tr>
<tr >
<td>Startup delay</td>
<td>500 ms</td>
<td>1500 ms</td>
</tr>
</tbody>
</table>
</body>
</html>
Explanation: We have two products with some matching and unmatched feature list shown in the table. We have also two radio buttons , with "choice" as name provided, when each selected , it highlights the matching or unmatching rows / features. When we choose the radio button , an change event is fired which is tracked in line number 7 , and we call the function "checkme", which takes the value selected as parameter.
At line 10 we have the function checkme defined, which essentially reads the elements from the second cell of each row, and for each row it, checks if the value matches with the 3rd cell in the table. Thus , we have then applied two different styles "similar" and "dissimilar" to the each row. Do note the the tbody td:nth-child(2) and td:last-child selectors used to choose the appropriate cells in the table.
Demo:
Highlight Similar Highlight Dissimilar
| Feature List | Canon 5d Mark 3 | Canon T3i |
|---|---|---|
| Sensor Type | CMOS | CMOS |
| Sensor Size | Full frame 36.0x24.0mm | APS-C 22.3x14.9mm |
| Sensor Crop factor | 1x | 1.6x |
| True resolution | 22.1 MP | 17.9 MP |
| Touch screen | No | No |
| Flips out | No | Yes |
| Live view | Yes | Yes |
| Lens availability | 156 lenses | 197 lenses |
| Waterproof | No | No |
| Weather sealed | Yes | No |
| Format | 1080p @ 30fps | 1080p @ 30fps |
| Image stabilization | None | None |
| Supports RAW | Yes | Yes |
| GPS | No | No |
| Startup delay | 500 ms | 1500 ms |