jqeury小筆記文-『jquery動態新增欄位並抓值』

  • 8502
  • 0

jqeury小筆記文-『jquery動態新增欄位並抓值』

小弟今天想做的是動態新增欄位,點選新增後會在表格裡出現TextBox給我們輸入並且點選

Enter後自動Submit出去,如下圖。

ScreenClip

ScreenClip1

 

ScreenClip2

首先我們先來看看,表格這邊的html 程式碼。沒什麼特別的地方,只是要注意一下tbody的id

等一下動態新增欄位,會新增在tbody下。

ScreenClip3

接下來的程式碼是點新增時,會自動將prepend()括號裡的HTML插入到id名為thbody的元素後面。

ScreenClip4

其中jquery中與插入有關的相關函式有以下幾個


1.append(要加入的東西) : 在每一個匹配的元素內部最後面加入…(內部插入)

2.prpend(要加入的東西) : 在每一個匹配的元素內部最前面加入…(內部插入)

3.before(要加入的東西) : 在每一個匹配的元素前面加入…(外部插入)

4.after(要加入的東西) : 在每一個匹配的元素後面加入…(外部插入)

http://webdesign.kerthis.com/jquery/jquery_manipulation

 

新增完畢後,我們要將動態產生欄位的值,submit到我們的後端。

我在這邊是希望輸入完後,按Enter就會自動submit的後端(我指定的Contoller),所以一開始我先寫個

可以偵測的到在textbox(newdirectory)點Enter時會傳alert訊息,但發現這樣寫一直偵測不到。後來問了

我們家的老大後,才知道需要改成用『on』綁定『'tbody'』,才可以抓取到動態欄位的Id。

ScreenClip5

 

改成用綁定後。

ScreenClip6

最後當判斷為Enter後執行id名為create的submit事件。

ScreenClip7

 



小弟才書學淺~請各位客官指教指教~~~

小弟日 : 你要知道自已不是帥哥,你才有可能變成帥哥 。