JavaScript实现增、删、改功能

1.页面初始化时,显示表格,列包括多选按钮、姓名、密码、性别、出生日期、宅电、电子邮件以及新增、修改、删除三个按钮。
性别显示的内容为“男”,“女”。
点击姓名左边的多选按钮,可以将表格中的所有多选按钮选中,如果取消选中姓名左边的多选按钮,则将所有多选按钮取消选中。
选择一条或者多条数据,点击【删除】按钮,提示用户“是否删除所选数据?”
如果用户选择是,则将数据进行删除,如果用户选择否,则不做任何处理。
如果用户没有选择数据,点击【删除】按钮,提示用户“请选择数据进行删除!”
如果没有数据,点击【删除】按钮,提示用户“没有数据可被删除!”

(1) main.html   (2) main.js

2.点【新增】弹出模态窗口

(1).性别下拉框0表示男,1表示女,默认有个请选择。
(2).提交时对出生日期进行正则表达式校验,正确的输入格式应该是2012-02-25。如果用户输入不符合校验,,提示用户“输入出生日期格式不合法!”,之后将焦点放在出生日期输入框上。
(3).提交时对宅电做正则表达式校验,数字(3~5位)-数字(8位)。如果用户输入不符合校验,,提示用户“输入宅电格式不合法!”,之后将焦点放在宅电输入框上。
(4).提交时电子邮件做正则表达式校验,字母和数字组合+@+字母组合+.+com。如果用户输入不符合校验,提示用户“输入电子邮件格式不合法!”,之后将焦点放在电子邮件输入框上。
(5).提交时姓名和密码不能为空。
(6).点击【重置】按钮,将所有输入框清空,下拉框恢复成“请选择”
(7).数据正常提交之后,刷新父页面,将输入的值在页面中展现。

(1) add.html   (2) add.js

3.选择一条数据,点击【修改】,弹出模态窗口

(1).在进入页面之后,要将刚才选中的数据的所有信息带到修改页面,在修改页面中进行显示。
(2).在对数据进行修改之后,点击【重置】按钮,数据要恢复成页面在初始化时显示的数据。
(3).点击【修改】按钮进行提交,各字段的校验,同新增,提交成功后,刷新父页面中的数据。
(4).提交时姓名和密码不能为空。
(5).在父页面选择数据的时候,如果选择了多条数据或没有选择数据,点击了【修改】按钮,则提示用户,“请选择一条数据进行修改!”

(1) edit.html    (2) edit.js

PS:具体详见附件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章