Créer des effets de table modifiables basés sur JQuery_jquery
WBOY
Libérer: 2016-05-16 16:24:54
original
1111 Les gens l'ont consulté
J'ai récemment travaillé sur un projet et les exigences du projet sont les suivantes : cliquez sur le tableau pour modifier directement, appuyez sur Entrée ou cliquez ailleurs sur la page pour rendre la modification effective, appuyez sur Echap pour annuler la modification
Deux amis ont proposé 2 solutions. Voyons laquelle est la plus adaptée ?
La première méthode pour éditer le tableau en cliquant dessus
//Équivalent à l'ajout de l'événement onload à la balise body dans la page
$(fonction() {
//Trouver tous les nœuds td
var tds = $("td");
//Ajouter des événements de clic à tous les td
tds.click(function() {
//Obtenir l'objet actuellement cliqué
var td = $(this);
// Supprime le contenu texte du td actuel et enregistre-le
var oldText = td.text();
//Créez une zone de texte et définissez la valeur de la zone de texte sur la valeur enregistrée
var input = $("");
//Définit le contenu de l'objet td actuel sur input
td.html(input);
//Définit l'événement click de la zone de texte comme étant invalide
input.click(function() {
return false ;
});
//Définissez le style de la zone de texte
input.css("border-width", "0");
input.css("font-size", "16px");
input.css("text-align", "center");
//Définissez la largeur de la zone de texte égale à la largeur de td
input.width(td.width());
//Déclenchez l'événement Select All lorsque la zone de texte obtient le focus
input.trigger("focus").trigger("select");
//Lorsque la zone de texte perd le focus, elle redevient texte
input.blur(function() {
var input_blur = $(this);
//Enregistre le contenu de la zone de texte actuelle
var newText = input_blur.val();
td.html(newText);
});
//Réponse aux événements clavier
input.keyup(function(event) {
// Récupère la valeur clé
var keyEvent = event ||
var key = keyEvent.keyCode;
//Obtenir l'objet actuel
var input_blur = $(this);
interrupteur (clé)
{
cas 13://Appuyez sur la touche Entrée pour enregistrer le contenu de la zone de texte actuelle
var newText = input_blur.val();
td.html(newText);
pause;
cas 27://Appuyez sur la touche echap pour annuler la modification et transformer la zone de texte en texte
td.html(oldText);
pause;
}
});
});
});
Deuxième méthode pour cliquer sur le tableau à modifier
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn