Es muy sencillo, mediante componentes open source, construir elementos front-end potentes para sitios webs o apps. En este tutorial te mostraremos cómo crear facilmente crear tablas editables utilizando Pure CSS y jQuery.
Lo primero que tienes que hacer es crear un archivo index.html en tu servidor o en tu equipo (si lo estas desarrollando en local). Pega el siguiente código dentro del nuevo archivo que hemos creado, y guárdalo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tabla editable</title>
<style>
body{ padding: 1% 3%; color: rgb(119, 119, 119); }
h1{ color:#333 }
</style>
</head>
<body>
<h1>Ejemplo de tabla editable</h1>
</body>
</html>
Ahora tendremos que incluir las herramientas gratuitas que vamos a utilizar en este tutorial. La primera es Pure CSS. Es un framework CSS muy ligero e ideal para proyectos pequeños. No necesitas descargarlo, ya que puede ser enlazado directamente desde los servers de Cloudflare. Por lo tanto, pega el siguiente código dentro de la sección <head> del fichero index.html que acabas de crear:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">
La segunda herramienta que vamos a utilizar es un plugin para jQuery muy sencillito llamado editableTableWidget. Descarga el fichero .js aquà y alójalo en tu servidor web o en tu equipo, en el mismo directorio que el fichero index.html que hemos creado antes. Para nuestro proyecto no necesitamos más plugins de jQuery.
Como vamos a crear una tabla HTML editable, lo que hay que hacer ahora es evidentemente... crear una tabla HTML. Aquà tienes la que vamos a usar en este tutorial. Debes pegarla en la sección <body> del documento index.html:
table id="editable" class="pure-table pure-table-bordered">
<thead>
<tr>
<th>#</th>
<th>Marca</th>
<th>Modelo</th>
<th>Año</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
Como puedes ver, nuestro documento index.html, gracia sa Pure CSS luce elegante y profesional. Si quieres saber más sobre qué puede hacer Pure CSS con las tablas HTML, echa un vistazo a su documentación oficial.
Nuestra tabla está estupenda, pero por ahora las celdas no se pueden editar. Mediante jQuery y el plugin editableTableWidget haremos que nuestra tabla sea editable. Lo primero que tenemos que hacer es incluir la librerÃa jQuery para poder utilizar, logicamente, el plugin editableTableWidget. Puedes utilizar tu propia copia de jQuery o bien linkarla desde Google CDN, como hago yo en el código de más abajo. También tendremos que enlazar el archivo del plugin, que habremos descargado previamente.
Inserta el siguiente código en tu documento index.html justo antes de cerrar la etiqueta </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="mindmup-editabletable.js"></script>
Una vez hecho, simplemente tienes que transformar tu tabla a editable. Pega este código después de los scripts que has pegado antes.
<script>
$('#editable').editableTableWidget();
</script>
Y ya estarÃa. Refresca el archivo index.html y echa un vistazo al resultado. Si todo ha ido bien, tendrás una tabla editable totalmente funcional.
Creando celdas que no se pueden editar
Ahora que tenemos una tabla editable y funcional, vamos a ir un poco más alla y vamos a mejorarla, aunque sea un poquitÃn. Lo primero que tenemos que hacer es asegurarnos de que algunas celdas no se puedan editar. No es muy dificil, solo tienes que añadir la clase uneditable en el td que no quieras que sea editable.
<td class="uneditable">...</td>
Y después, utiliza el siguiente JavaScript para detectar cambios en celdas no editables y evitarlo:
$('#editable td.uneditable').on('change', function(evt, newValue) {
return false;
});
Guardándolo todo en base de datos
Por último, es posible que quieras almacenar los valores de la tabla HTML en una base de datos. La solución más sencilla para hacer esto serÃa utilizar jQuery y Ajax para enviar automáticamente los valores a un script PHP que se encargue de gestionar los datos y almacenarlos en una base de datos.
Esto es muy sencillo de llevar a cabo, en realidad, solo tenemos que utilozar el método de jQuery .post():
$('#editable td').on('change', function(evt, newValue) {
$.post( "script.php", { value: newValue })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
;
});
En la lÃnea 1, utilizamos un detector de eventos para verificar si el valor ha sido cambiado por el usuario. En caso afirmativo, se envÃa una solicitud a .post() que contiene la variable newValue a un script PHP (script.php, no incluido en este tutorial) en el servidor.