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