Cómo crear una tabla comparativa con jQuery

Servicios online como Compare Ninja, permiten crear fácilmente tablas comparativas con HTML y CSS. Los desarrolladores, pueden crear su propia implementación con jQuery, siguiendo el tutorial que publicó Chris Coyier.

Como todo desarrollo con jQuery, es sencillo, pero también elegante.

Implementación

Para comenzar hay que enlazar los archivos CSS y JS:

<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/example.js'></script>

En el archivo example.js está el siguiente código que es el encargado de darle la apariencia a la tabla comparativa:

$(function() {
var numCols = $("colgroup").length,
featuredCol;
// Zebra striping
$("tr:odd").addClass("odd");
$("tr:last").addClass("final-row");
// Figure out which column # is featured.
$("colgroup").each(function(i) {
if (this.id == "featured") featuredCol = i+1;
});
// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column
$("td, th").each(function(i) {
$(this).addClass("table-col-" + ((i % numCols) + 1));
if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});
});

Luego el código HTML que implementa la tabla:

<table id="feature-table">
<colgroup class="basic"></colgroup>
<colgroup class="plus"></colgroup>
<colgroup class="premium" id="featured"></colgroup>
<colgroup class="pro"></colgroup>
<thead>
<tr>
<th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
<th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
<th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
<th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>50 pages</td>
<td>75 pages</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>3 users</td>
<td>5 users</td>
<td>10 users</td>
<td>Unlimited</td>
</tr>
<tr>
<td>10 Sites</td>
<td>25 Sites</td>
<td>100 Sites</td>
<td>Unlimited</td>
</tr>
<tr>
<td>50 MB</td>
<td>250 MB</td>
<td>1 GB</td>
<td>5 GB</td>
</tr>
<tr>
<td>included</td>
<td>included</td>
<td>included</td>
<td>included</td>
</tr>
<tr>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><a class="button" href="#">Sign Up</a></td>
<td><a class="button" href="#">Sign Up</a></td>
<td><a class="button" href="#">Sign Up</a></td>
<td><a class="button" href="#">Sign Up</a></td>
</tr>
</tbody>
</table>
</div>

Como les había comentado, crear una tabla comparativa es muy sencillo con jQuery.

Notas finales:

En la página hay un demo online y también la versión para descargarlo y correrlo localmente en el navegador web sin necesidad de montarlo en un servidor web.

Cuando analicen el código del demo, notarán un línea adicional que omití, debido a que se trata de un hack para las versiones antiguas de Internet Explorer.

Feature Table Design

Website: css-tricks.com/feature-table-design

Vía |ajaxshake.com / @lagus123