由于工作的一個小需求，來寫一寫這個很小，但是新手朋友可能會有些迷惑的功能
記得剛工作的時候做過一個類似的功能，但是的思路不太記得了，只記得很亂，測出各種bug。

今天來看一下這次的思路，比較適合新手朋友，沒有很多的jquery父子級關系

先看一下大概的界面

 
實現的就是點擊新增一行會新增一條空白行，點擊刪除將這行刪除，點擊保存將信息保存

校驗方面做得比較簡單，只是標紅不讓提交
 
1。 先看一下 初始頁面的主要代碼


 

 

是不是很簡單，初始化的頁面 只有一條單獨的空行和兩個按鈕外加兩個隱藏域

這個小功能，唯一的迷惑可能就是增加多條后從中間刪除，會造成數據的錯亂。
在這里我是這么處理的，記錄了一個初始化的max最大值隱藏域，默認給0。然后添加一行將這個值加一，刪除不便，這樣可以保證生成的動態id唯一且比較好做默認排序的效果。
由于這個需求是在最后新增一行，所以比較簡單。 如果有同學要做在特定行下新增，除了id不重復還需要考慮一下排序的問題。

下面就看一下 新增的js代碼
 
 


以上就是新增行和刪除特定行的js，是不是很簡單。

2。新增保存操作

由于業務需求保存前做了一些校驗不詳說，只是傳遞數據
這里其實有很多辦法json，列表等等。我是比較懶。自己按自己的規則拼接了字符串來傳遞，到業務處理的地方再解析取出，僅供大家參考下

先看解析數據的代碼，將行的id傳遞進方法
 

保存方法沒什么好說，有一個不啟用的功能在這里處理一下，剩下就是傳遞數據去后臺處理再返回結果
 
 

剩下就是后臺入庫那些啦，很簡單對不對，然后就是如果這個功能需要修改的時候 還存在一個回顯得功能，來看一下 


3。 修改回顯操作
      其實上面的保存方法已經滿足了修改的要求，那么問題只剩下一個就是回顯

 
 

這里有幾點  1。由于是共用的頁面，所以在初始化數據之前將span0的原有空行刪除
                    2。新循環生成的新行，id和原來的一樣，這樣在后臺取數據的時候注意下排序
                   3。由于id是原來保存的，而新打開頁面中我們的標記max還是0，所以在數據加載的同時要將max算出，并放回到隱藏域中。

這樣這個小功能就基本完成啦。


歡迎大家交流，共同學習，希望給新人一點啟示，高手別劈我  哈哈 。

文章為原創 發布在 http://techfoxbbs.com/thread-21638-1-1.html。 也歡迎大家 關注公眾號 TechFoxBBS ，一起交流學習 
轉載 請標明出處 

專注于為中小企業提供成都網站設計、成都網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業洪江免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了數千家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

當前題目：【原創分享】動態新增行和刪除行
本文鏈接：http://www.yijiale78.com/article16/ghcodg.html

成都網站建設公司_創新互聯，為您提供域名注冊、建站公司、App開發、品牌網站建設、服務器托管、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯