首頁 > 網際網路

如何用jquery建立簡單動態表格

2019-12-11 11:09:41

如何用jquery建立簡單動態表格?其實很簡單,通過使用jquery的html方法,就可以在一個容器裡建立一個表格,下面我們一起來看一下。

1

因為需要使用jquery來操作,所以我們先引入jquery指令碼檔案。


2

然後在html裡,我們建立一個空的div,動態生成的表格就放在這個div裡。一個按鈕,用來觸發建立表格。


3

建立一個createTable的方法來建立表格。其中引數用來指明生成的表格是多少行,多少列的。

變數html是一個字串,先用一個for迴圈來生成表格的行(tr)。


4

裡面再巢狀一個for迴圈,是生成表格的列(td)的。


5

生成表格的字串構建好後,就可以呼叫jquery的html方法來生成表格了。把字串變數傳進方法裡就行了。


6

接著為按鈕系結點選事件,在點選響應事件裡,呼叫createTable方法,引數可以按自己的要求傳,這裡我們生成一個3行4列的表格。


7

執行頁面,點選上面的按鈕來生成表格。


8

點選後,我們就可以看到,動態生成了一個3行4列的空表格了,當然如果你要連表格內容也生成,那麼在構建字串時,把內容也放進去就行了。



IT145.com E-mail:sddin#qq.com