L’utilisation de composants open source permet de créer très facilement et rapidement de puissants éléments frontaux pour les sites Web ou les applications. Ce tutoriel vous montrera comment créer facilement une table modifiable à l’aide de PureCSS et jQuery.

Tableau HTML modifiable avec jQuery

A débuté

La toute première chose à faire est d’en créer un index.html Document sur votre serveur ou lecteur local. Collez le code de base suivant dans le document nouvellement créé et enregistrez-le.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Editable table</title>
  <style>
    body{ padding: 1% 3%; color: rgb(119, 119, 119); }
    h1{ color:#333 }
  </style>
</head>

<body>
<h1>Editable table example</h1>

</body>
</html>

Nous devons maintenant mettre la main sur les outils gratuits que nous utiliserons dans ce didacticiel. Le premier s’appelle CSS pur. C’est un framework CSS très léger, idéal pour les petits projets. Vous n’avez pas besoin de le télécharger car il peut être lié directement à partir des serveurs Cloudflare. Collez simplement ce qui suit dans la boîte <head> Section de la index.html Fichier que vous venez de créer:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">

Le deuxième outil que nous utiliserons est un plugin jQuery simple et mignon appelé editableTableWidget. Téléchargez le .js déposer Ici et placez-le sur votre serveur Web ou sur votre disque dur local dans le même répertoire que celui-ci index.html Fichier que vous avez créé. Aucun autre plugin jQuery n’est requis.

Le tableau HTML

Puisque nous allons créer un tableau HTML modifiable, nous devons maintenant évidemment … créer un tableau HTML.

Voici celui que nous utiliserons dans ce tutoriel. Il doit être inséré dans le <body> Section de votre index.html Document:

<table id="editable" class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</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>

Regardez le vôtre index.html Document: Grâce à Pure CSS, notre tableau HTML très simple est élégant et professionnel.

Pour plus d’informations sur ce que Pure CSS peut faire pour vos tableaux HTML, assurez-vous de consulter le documentation associée.

Ajout de jQuery

Notre tableau semble correct, mais les cellules ne peuvent pas être modifiées pour le moment. Avec jQuery et le editableTableWidget jQuery, nous allons rendre la table modifiable.

La première chose à faire est de créer un lien vers jQuery depuis editableTableWidget Le plugin en dépend. Vous pouvez utiliser votre propre copie de jQuery ou créer un lien à partir de Google CDN comme décrit ci-dessous. Nous devons également établir un lien avec cela mindmup-editabletable.js Fichier que nous avons téléchargé plus tôt.

Entrez le code suivant dans votre index.html Document, juste au-dessus de la conclusion </body> Étiqueter.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<script src="mindmup-editabletable.js"></script>

Une fois que vous avez terminé, il vous suffit de rendre le tableau HTML modifiable comme indiqué ci-dessous. Ce code se trouve juste sous les scripts que vous venez d’ajouter.

<script>
	$('#editable').editableTableWidget();
</script>

C’est ça. Mettre à jour le index.html Fichier et voir le résultat: vous venez de rendre le tableau modifiable.

Créer des cellules non modifiables

Maintenant que nous avons une table modifiable entièrement fonctionnelle, allons plus loin et voyons ce que nous pouvons faire pour l’améliorer. La première chose à faire est de s’assurer que certaines cellules ne peuvent pas être modifiées. Pas grand-chose ici, il suffit d’ajouter une classe à chacun <td> Élément:

<td class="uneditable">...</td>

Utilisez ensuite le code JavaScript suivant pour détecter et empêcher les modifications apportées aux cellules non modifiables:

$('#editable td.uneditable').on('change', function(evt, newValue) {
	return false;
});

Si vous voulez tester cela la démoEssayez de modifier la cellule intitulée «2010» dans le coin inférieur droit du tableau. Comme vous pouvez le voir, la valeur de la cellule ne peut pas être modifiée.

Stocker des données dans votre base de données

En fin de compte, il y a une forte probabilité que vous souhaitiez enregistrer les valeurs de la table HTML dans une base de données. La solution la plus simple à cela serait d’utiliser jQuery et Ajax pour envoyer automatiquement les valeurs à un script PHP qui s’occupe de gérer les données et de les stocker dans une base de données.

C’est en fait très facile avec ça jQuery .post() Méthode:

$('#editable td').on('change', function(evt, newValue) {
	$.post( "script.php", { value: newValue })
		.done(function( data ) {
    			alert( "Data Loaded: " + data );
		});	
	;
});

À la ligne 1, nous utilisons un écouteur d’événements pour vérifier si la valeur a été modifiée par l’utilisateur. Si oui, un .post() Demande avec le newValue La variable est envoyée à un script PHP (script.php, non inclus dans ce didacticiel) sur le serveur.

Questions fréquemment posées

plugin jQuery

Ce code fonctionne-t-il avec Bootstrap?

Absolument, ce code peut facilement être adapté à Bootstrap ou autres Cadres CSS. Tout ce que vous avez à faire est d’ajouter un identifiant à la table, puis de l’appeler editableTableWidget() Méthode pour rendre votre tableau HTML modifiable:

$('#your-table').editableTableWidget();

Puis-je avoir plusieurs tableaux HTML modifiables sur la même page?

Oui. Le moyen le plus simple de le faire est d’ajouter une classe à vos tables, puis de l’appeler editableTableWidget() Méthode:

$('.editable').editableTableWidget();



Source link

Recent Posts