javascript（jquery）实现表格的编辑以及遮罩层的实现！

最新推荐文章于 2022-10-19 10:15:00 发布

Fly_Sky520

最新推荐文章于 2022-10-19 10:15:00 发布

阅读量3.1k

点赞数

分类专栏： Javascript学习笔记文章标签： javascript jquery table function class input

本文链接：https://blog.csdn.net/Fly_Sky520/article/details/6208279

版权

这篇博客介绍了如何使用jQuery实现表格的编辑功能，并结合遮罩层进行交互。通过点击表格行，可以选中和取消选中，当选中行数大于1时，编辑按钮禁用，删除按钮启用；当只有一个选中行时，编辑和删除按钮均可用。同时，文章还展示了全选和反选功能，以及创建遮罩层对话框来编辑选定行的数据。

摘要由CSDN通过智能技术生成

㈠html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="table.css" mce_href="table.css" rel="stylesheet" type="text/css" /> <mce:script language="javascript" src="jquery-1.4.3.min.js" mce_src="jquery-1.4.3.min.js"></mce:script> <mce:script src="edittable.js" mce_src="edittable.js" type="text/javascript"></mce:script> </head> <body> <table> <thead> <tr> <th>编号</th> <th>管理员</th> <th>密码</th> <th>邮箱</th> <th>联系方式</th> <th>组类</th> <th>注册时间</th> <th>备注</th> </tr> </thead> <tbody> <tr class="element"> <td>1</td> <td>张三</td> <td>345621</td> <td>hello@163.com</td> <td>12345678987</td> <td>1</td> <td>2010-12-01</td> <td>超级管理员</td> </tr> <tr class="element"> <td>2</td> <td>李四</td> <td>345621</td> <td>hello@163.com</td> <td>12345678987</td> <td>2</td> <td>2010-12-01</td> <td>管理员</td> </tr> <tr class="element"> <td>3</td> <td>王五</td> <td>345621</td> <td>hello@163.com</td> <td>12345678987</td> <td>1</td> <td>2010-12-01</td> <td>超级管理员</td> </tr> </tbody> <tfoot> <tr><td