Utilisez jQuery pour implémenter des tables_jquery modifiables-js tutoriel-php.cn

Aujourd'hui, nous avons appris l'exemple de l'utilisation de jQuery pour implémenter une table modifiable. Les exigences pour cet exemple sont les suivantes : cliquez sur une cellule du tableau de premier plan pour modifier son contenu, appuyez sur Entrée pour enregistrer le contenu modifié et sur Échap pour annuler le contenu enregistré. Principe : lorsque vous cliquez sur une cellule du tableau client, ajoutez une zone de texte dans la cellule, attribuez le contenu d'origine de la cellule à la zone de texte, puis modifiez davantage le contenu de la zone de texte. Après modification, réaffectez le contenu de la zone de texte à la cellule.

Code source :

Code frontend :

Copier le code Le code est le suivant : html Content-Type" content="text/html; charset=utf-8"/> jq2—table modifiable src ="js/editTable.js"> &lt ; /script>--%> 🎜 > Vous pouvez modifier les éléments du tableau en cliquant sur la souris ;/ tr> ; 000001 > 000002 李思 > 000003 > Zhao Liu ; >

Copier le code

Le code est le suivant :

body { } table { border:1px solid #000000; border-collapse:collapse ;/*Cell border fusion*/ width:400px } table td { border:1px solid #000000; largeur:50%; } table th { border:1px solid #000000; width:50% } tbody th { arrière-plan; -color:#426fae; } code jquery Copier le code

Le code est comme suit : $(function () { //Trouver toutes les lignes paires du tableau sauf la première tr //Utiliser pair pour renvoyer tous les éléments tr via tbody tr $( "tbody tr:even").css("background-color", "#ece9d8"); //Trouver toutes les cellules du numéro d'étudiant var numId = $("tbody td:even");

//Enregistrer l'événement de clic de souris pour la cellule numId.click(function () { //Trouver le td correspondant au clic de souris en cours, cela correspond au td qui a répondu au cliquez var tdObj = $(this); //Déterminez s'il y a une zone de texte dans td if (tdObj.children("input").length>0) { return false ; } //Récupérer le contenu du tableau var text = tdObj.html( //Effacer le contenu dans td tdObj.html(""); 🎜>//Créer une zone de texte //Supprimer la bordure de la zone de texte //Définir la taille de la police dans la zone de texte pour qu'elle soit la même que celle du texte du tableau //Définir l'arrière-plan la couleur de la zone de texte doit être la même que la couleur d'arrière-plan du tableau . //La largeur de la zone de texte est la même que la largeur de td //Mettez la valeur de td dans la zone de texte. //Insérez la zone de texte dans td var inputObj = $(" ").css("border-width", "0").css("font -size", tdObj.css("font-size").css("background-color ", tdObj.css("background-color")).width(tdObj.width()).val(text). appendTo(tdObj); //Une fois la zone de texte insérée, elle obtient d'abord le focus, puis la sélectionne inputObj.trigger("focus").trigger("select") //Le clic l'événement ne peut pas être déclenché après l'insertion de la zone de texte inputObj.click(function () { return false; } //Traitement de l'opération des touches enter et esc sur le texte); box inputObj.keyup(function (event) { //Obtenir la valeur de la touche du clavier actuellement enfoncé var keycode = event.which; //Gérer le retour chariot if ( keycode==13) { //Obtenir le contenu de la zone de texte actuelle var inputtext = $(this).val ( //Modifier le contenu dans td avec le contenu du texte); box tdObj.html(inputtext); } //Traitement du contenu de esc if (keycode== 27) { //Restaurer le contenu de td au contenu original tdObj.html(text); } }); });

Résumé : Points de connaissances pouvant être acquis grâce à apprendre de cet exemple : 1. HTML

1.table peut contenir le tête et le corps

2 Le contenu de l'en-tête du tableau peut être placé dans le . 3. table{} Cette méthode d'écriture est appelée sélecteur d'étiquette et peut avoir un impact sur l'ensemble du tableau.

4.table td{} représente tous les tds contenus dans le tableau.

2. En terme de jquery

$() peut mettre 4 paramètres différents entre parenthèses

1 Mettre le paramètre directement en fonction, indiquant que la page est chargée. : Par exemple, l'exemple ci-dessus Ligne 1 dans le code jquery $(function(){})

2 Le paramètre peut être un sélecteur de classe CSS et est empaqueté dans un objet jquery. Par exemple : Ligne 4 du code jquery dans l'exemple ci-dessus $("tbody tr:even")

3 Si le paramètre est du texte HTML, vous pouvez créer un nœud dom et le conditionner dans un objet jquery. . Par exemple : Ligne 27 du code jquery dans l'exemple ci-dessus $(" ")

4 Le paramètre peut être un objet dom. l'objet dom dans un objet jquery. Ligne 11 du code jquery dans l'exemple ci-dessus var tdObj = $(this)

L'objet jquery dans cet exemple

1 Ajoutez des attributs CSS après l'objet jquery pour définir les attributs CSS de. le nœud. Par exemple, la ligne 4 du code jquery dans l'exemple ci-dessus $("tbody tr:even").css("background-color", "#ece9d8"); Le nœud DOM correspondant à l'appareil est enregistré dans un tableau.

3. L'ajout de la méthode html après l'objet jquery peut définir ou obtenir le contenu html du nœud. Par exemple, la ligne 17 du code jquery dans l'exemple ci-dessus var text = tdObj.html()

4. L'ajout de la méthode val après l'objet jquery peut obtenir ou définir la valeur du nœud. Par exemple, dans l'exemple ci-dessus, la ligne 41 du code jquery est var inputtext = $(this).val()

5 Ajout de la méthode width après que l'objet jquery puisse définir ou obtenir la largeur d'un. nœud. Par exemple, la ligne 27 du code jquery dans l'exemple ci-dessus est tdObj.width()

6. L'ajout de la méthode appendTo après l'objet jquery peut ajouter un nœud à tous les nœuds enfants d'un autre nœud. Par exemple, dans l'exemple ci-dessus, la ligne 27 appendTo(tdObj) dans le code jquery

7 L'ajout de la méthode de déclenchement après l'objet jquery peut déclencher un événement js. Par exemple, dans l'exemple ci-dessus, la ligne 29 du code jquery inputObj.trigger("focus").trigger("select")

8 L'ajout de la méthode children après l'objet jquery peut obtenir les nœuds enfants. d'un certain nœud, qui peut être formulé Paramètres pour limiter le contenu des nœuds enfants. Par exemple, la ligne 13 du code jquery dans l'exemple ci-dessus tdObj.children("input").length

9 Si l'objet jquery renvoyé par le sélecteur contient plusieurs nœuds dom, enregistrez un événement de clic similaire sur. cet objet, tous les nœuds DOM seront utilisés pour cet événement. Par exemple, ligne 9 numId.click dans le code jquery dans l'exemple ci-dessus ;