jquery表格是一種非常常用的數據展示方式,它可以將大量的數據進行規整,清晰的展現在我們面前。而要操作jquery表格,我們就需要學會如何添加數據,接下來就來介紹一下如何向jquery表格中添加數據。
首先,我們需要在HTML文件中創建一個表格。代碼如下:
在這段代碼中,我們創建了一個含有兩列的表格,分別是“姓名”和“年齡”。而tbody標簽中還沒有任何的數據。
接下來,我們可以使用jquery來添加數據。代碼如下:
從以上代碼中可以看到,我們首先定義了一個二維數組data,其中包含了三個人的信息,分別是姓名和年齡。接著我們用一個空字符串變量htmlStr來拼接每行的HTML代碼。
最后我們使用了append方法向tbody標簽中添加了htmlStr字符串,由于是在tbody中添加,所以我們使用了#myTable tbody來選擇目標標簽。
經過以上的代碼操作后,我們就可以看到在表格中已經成功的添加了三行數據。通過上述的代碼示例我們可以得知,向jquery表格中添加數據非常的簡單,只需要使用append方法就可以輕松完成。
首先,我們需要在HTML文件中創建一個表格。代碼如下:
<table id="myTable"> <thead> <tr> <th>姓名</th> <th>年齡</th> </tr> </thead> <tbody> </tbody> </table>
在這段代碼中,我們創建了一個含有兩列的表格,分別是“姓名”和“年齡”。而tbody標簽中還沒有任何的數據。
接下來,我們可以使用jquery來添加數據。代碼如下:
$(document).ready(function(){ var data = [ ["張三", 24], ["李四", 28], ["王五", 31] ]; var htmlStr = ""; for (var i = 0; i < data.length; i++) { htmlStr += "<tr><td>" + data[i][0] + "</td><td>" + data[i][1] + "</td></tr>"; } $("#myTable tbody").append(htmlStr); });
從以上代碼中可以看到,我們首先定義了一個二維數組data,其中包含了三個人的信息,分別是姓名和年齡。接著我們用一個空字符串變量htmlStr來拼接每行的HTML代碼。
最后我們使用了append方法向tbody標簽中添加了htmlStr字符串,由于是在tbody中添加,所以我們使用了#myTable tbody來選擇目標標簽。
經過以上的代碼操作后,我們就可以看到在表格中已經成功的添加了三行數據。通過上述的代碼示例我們可以得知,向jquery表格中添加數據非常的簡單,只需要使用append方法就可以輕松完成。