jQuery实现可编辑的表格实例讲解(2)

编程学习 2021-07-04 21:03www.dzhlxh.cn编程入门
这篇文章主要内容是JQuery实现可编辑的表格实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现可编辑表格的具体代码,供大家参考,具体内容如下

我们最终要达到的效果如下:

当单击学号列的时候,可以进行编辑:

当单击ESC的时候,操作取消,当单击回车的时候,修改生效(没有与后台交互)
页面代码如下(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"> 
 <div> 
 <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> 
 </div> 
 </form> 
</body> 
</html> 

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 path="jquery-1.9.1.min.js" /> 
 
//$(document).ready(function () { 
// alert('test'); 
/ 

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板