主页 / 网络编程 /

jQuery实现可编辑的表格实例讲解（2）

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

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

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

当单击学号列的时候，可以进行编辑：

当单击ESC的时候，操作取消，当单击回车的时候，修改生效（没有与后台交互）
页面代码如下（asp.）:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://.w3./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'); 
/
上一篇：JQuery菜单效果的两个实例讲解（3） 下一篇：JQuery入门基础小实例(1)

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by