0

0

利用jQuery完成表格的增加删除和修改及设置奇偶行颜色

巴扎黑

巴扎黑

发布时间:2017-08-09 16:08:52

|

2130人浏览过

|

来源于php中文网

原创

最近一周在学了一点点html, css, javascript,用javascript的jquery完成了一个简单的表格操作,有增加、删除和修改功能。

表格分三列,第一列是学生编号(ID号),第二列是学生姓名,第三列为学生年龄。在姓名和年龄框内输入数据,再点“Add”就可以增加数据(ID号会自动递增的生成),输入ID号再输入新的姓名和年龄点“Edit”就可以修改,删除的话输入ID号就点“Delete”就可以删除指定行。

表格最上面会及时更新当前表中行数,在输入ID时也会动态响应并更新姓名年龄输入框的内容。使程序达到了基本的可操作性。表格的表头用CSS作了颜色控制,表格中的内容也用CSS按奇偶行设置了不同的颜色。从而使界面变的更加美观。

下面是截图:

invideo AI
invideo AI

InVideo 使用现成的模板简化视频创建

下载

 

完整的代码如下(Win7+IE9测试通过):

//by MoreWindows (http://blog.csdn.net/MoreWindows)








简单的表格操作,有增加、删除和修改功能。id输入框能动态响应输入

id: Name: Age:
学生表
idNameAge
1 MoreWindows 24
2 MW 19