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

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

先看一下大概的界面


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

校驗方面做得比較簡單，只是標(biāo)紅不讓提交

1。 先看一下 初始頁面的主要代碼





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

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

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



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

2。新增保存操作

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

先看解析數(shù)據(jù)的代碼，將行的id傳遞進方法


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



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

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




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

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

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

文章為原創(chuàng) 發(fā)布在 http://techfoxbbs.com/thread-21638-1-1.html。 也歡迎大家 關(guān)注公眾號 TechFoxBBS ，一起交流學(xué)習(xí)
轉(zhuǎn)載 請標(biāo)明出處

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供橋東網(wǎng)站建設(shè)、橋東做網(wǎng)站、橋東網(wǎng)站設(shè)計、橋東網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、橋東企業(yè)網(wǎng)站模板建站服務(wù)，十載橋東做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：【原創(chuàng)分享】動態(tài)新增行和刪除行-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://weahome.cn/article/dedsdh.html