用Jquery如何爲Table添加行?
做網站前端開發,對Jquery都很熟悉了吧?它爲我們操作HTML Dom提供了很多便利,下面我們一起看下用Jquery怎樣爲一個table添加一行數據?
操作方法
(01)要使用Jquery來操作,我們首先要在代碼裏引入對應的腳本。
(02)然後看下我們的html初始的 table,<table id="tbl" class="table table-bordered"> <tr> <td>1</td> <td>A</td> <td>a</td> </tr> <tr> <td>2</td> <td>B</td> <td>b</td> </tr> </table>
(03)再在html里加上一個按鈕,就是點擊這個按鈕爲table添加一行.<input type="button" class="btn btn-primary" value="添加行" onclick="add_tr()" />代碼裏添加了點擊事件,點擊後會調用 add_tr方法。
(04)添加這個add_tr方法的具體邏輯
(05)解釋下邏輯,定義一個數組,然後往數組裏放入字符串,就是tr內容的字符串。原table的每一行tr都由三個單元格td組成,所以新加的行也要三個td,每個td的內容也要對應設置。然後把這個數組的內容用 join方法聯結成一個字符串,再用Jquery的append方法,把這個字符串附加到table的最後面。
(06)具體的邏輯代碼已寫好,我們看下頁面,
(07)在頁面上點擊按鈕,點擊後就會調用添加行的邏輯,我們可以看到新加的行,已成功添加到table裏。
(08)這個按鈕的邏輯可以多次點擊,多次爲table添加行,每點擊一次添加一行。(但有點不是很靈活的地方,就是新加行的內容都是固定的內容,大家可以根據自己的需求,適當修改一下)
-
實例講解Flash中如何製作旋轉球體動畫
Flash是一款專門用來製作動畫的軟件工具,在網上就有很多的破解版本,下載破解綠色版本的安裝包比較容易安裝。Flash的界面簡潔,功能齊全。現在,我們用實際例子看看怎麼在Flash中製作旋轉球體動畫吧。操作方法(01)新建文檔雙擊桌面上的fla圖標,打開軟件。在動畫軟件菜單...
-
Visual Studio如何設置代碼自動換行
作爲軟件開發人員,我們經常使用IDE編輯工具,VisualStudio就是常用的開源工具之一。但是我們在應用的時候經常會遇到寫的代碼過長而出現橫向滾動條的情形。下面小編就給大家介紹如何配置VS來讓你的代碼自動換行操作方法(01)首先我們先來看一下沒有經過配置的VS在出...
-
myeclipse與eclipse的區別
對於軟件工程專業的人來說,myeclipse和eclipse這兩個軟件都是不會陌生的,我們在大二學習Java的時候使用的是eclipse,而學習JavaEE的時候使用的myeclipse,這兩個軟件的界面與安裝過程幾乎是一模一樣,那麼myeclipse和eclipse究竟有哪些主要區別呢?操作方法(01)名稱不同my...
-
Chrome如何在禁止右鍵的網站,把文字複製下來?
在網上瀏覽文章時,有時看到一篇好的文章,或一段經典的話語,想要複製下來,保存到自己的word文檔裏,通常都是先選擇需要複製的文字,然後右鍵,點擊複製。或者直接點擊鍵盤ctrl+c來複制。但有些網站禁止了右鍵,就算你點擊右鍵也沒有菜單彈出來。也禁止了快捷鍵ctrl+c,所以按...