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.

EntradasRelacionados

Samsung e IBM lanzan el reto “Call for Code”para homenajear a los héroes de la vida

Huawei Apps Up 2021 – Conoce todos los detalles – Video

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='http://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.jsestá 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.