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:具體詳見附件

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