JQuery implements table function that can be edited in real time

This time I will bring you JQuery to implement the form function that can be edited in real time. What are the precautions for JQuery to implement the form function that can be edited in real time. The following is a practical case, let's take a look. The final effect we want to achieve is as follows:

When you click the student number column, you can edit it:

When ESC is clicked, the operation is canceled. When Enter is clicked, the modification takes effect (no interaction with the background)
The page code is as follows (asp.net):

 
 
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
 
 <title></title> 
 <link> 
 <script></script> 
 <script></script> 
 
 
 

   

   

                                                                                               

可编辑的表格
学号	姓名
00001	小明
00001	小明
00001	小明
00001	小明

      

   

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 
 }

JS(eidtTable.js):

/// <reference></reference> 
 
//$(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>"); 
 
 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); 
 } 
 }); 
 }); 
});

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

Detailed explanation of how jquery operates data in tables

Detailed explanation of the steps used by the table sorting component tablesorter

The above is the detailed content of JQuery implements table function that can be edited in real time. For more information, please follow other related articles on the PHP Chinese website!