JQuery implémente une fonction de table qui peut être modifiée en temps réel-js tutoriel-php.cn

JQuery implémente une fonction de table qui peut être modifiée en temps réel

php中世界最好的语言

Libérer： 2018-04-24 14:20:20

original

2147 Les gens l'ont consulté

Cette fois, je vais vous proposer JQuery pour implémenter la fonction de table qui peut être modifiée en temps réel. Quelles sont les précautions pour que JQuery implémente la fonction de table qui peut être modifiée en temps réel. est un cas pratique, jetons-y un coup d'œil. L'effet final que nous souhaitons obtenir est le suivant :

Lorsque vous cliquez sur la colonne du numéro d'étudiant, vous pouvez la modifier :

Lorsque l'on clique sur ESC, l'opération est annulée. Lorsque l'on clique sur Entrée, la modification prend effet (pas d'interaction avec le fond)
Le code de la page est le suivant (asp.net) :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <link href="css/eidtTable.css" rel="stylesheet" type="text/css" /> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/eidtTable.js" type="text/javascript"></script> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <p> 
 <table> 
 <thead> 
 <tr> 
  <th colspan="2">可编辑的表格</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
  <th>学号</th> 
  <th>姓名</th> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 </tbody> 
 </table> 
 </p> 
 </form> 
</body> 
</html>

Copier après la connexion

CSS(eidtTable.css)

table 
{ 
 border:1px solid black; 
 border-collapse:collapse; 
 width:500px; 
 } 
table th 
{ 
 border:1px solid black; 
 width:50%; 
 } 
table td 
{ 
 border:1px solid black; 
 width:50px; 
 } 
tbody th 
{ 
 background-color:#A3BAE9 
 }

Copier après la connexion

JS(eidtTable.js) :

/// <reference path="jquery-1.9.1.min.js" /> 
 
//$(document).ready(function () { 
// alert('test'); 
//}); 
 
//简便的写法 
$(function () { 
 $("tr:odd").css("background-color", "#ECE9D8"); 
 var objTd = $(".editTd"); 
 
 objTd.click(function () { 
 var text = $(this).html(); 
 var objThisTd = $(this); 
 
 //解决点击文本框和td中间的空隙还是会出问题 这个问题 
 if (objThisTd.children("input").length > 0) { 
 return false; 
 } 
 
 var inputText = $("<input value=&#39;test&#39; type=&#39;text&#39;/>"); 
 
 inputText.width(objTd.width()).css("font-size", "16px").css("background-color", objTd.css("background-color")).css("border-width", "0").val(text); 
 
 objThisTd.html(""); 
 inputText.appendTo(objThisTd); 
 
 inputText.trigger("focus").trigger("select"); 
 
 inputText.click(function () { 
 return false; 
 }); 
 
 //这里采用的keydown事件，我试过用keyup事件无法屏蔽浏览器的回车页面提交事件 
 inputText.keydown(function (event) { 
 //alert(event.keyCode); 
 var keycode = event.which; 
 if (keycode == 13) { 
 objThisTd.html($(this).val()); 
 //return false; 
 } 
 if (keycode == 27) { 
 objThisTd.html(text); 
 } 
 }); 
 }); 
});

Copier après la connexion

Je te crois Je l'ai maîtrisé après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la façon dont jquery fonctionne sur les données dans les tableaux

Explication détaillée des étapes utilisées par le composant de tri de table tablesorter

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!