jQuery ajax動(dòng)態(tài)生成table功能示例
本文實(shí)例講述了jQuery ajax動(dòng)態(tài)生成table的方法。分享給大家供大家參考,具體如下:
$(function(){ ajaxT(); }); function ajaxT(){ $.ajax({ type:"POST", dataType: "json", url:"<%=basePath%>UserInfoServlet", data:"doaction=userList", success:function(data){ createShowingTable(data); } } ); } //動(dòng)態(tài)的創(chuàng)建一個(gè)table function createShowingTable(data) { var tableStr = "<table class='tab-list' width='99%'>"; tableStr = tableStr + "<tr class='list-header'>" +"<td width='5%'>序號(hào)</td>" +"<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>" +"<td width='30%'>用戶(hù)姓名</td>" +"<td width='20%'>工號(hào)</td>" +"<td width='20%'>職位</td>" +"<td width='20%'>創(chuàng)建時(shí)間</td>" +"</tr>"; var len = data.length; for ( var i = 0; i < len; i++) { tableStr = tableStr + "<tr>" +"<td>"+ (i+1) + "</td>" +"<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='"+data[i].key+"' /></td>" +"<td>"+ data[i].realName + "</td>" + "<td>"+ data[i].userNo + "</td>" + "<td>"+ data[i].position + "</td>" +"<td>"+data[i].regTime+"</td>" +"</tr>"; } if(len==0){ tableStr = tableStr + "<tr style='text-align: center'>" +"<td colspan='6'><font color='#cd0a0a'>"+ 暫無(wú)記錄 + "</font></td>" +"</tr>"; } tableStr = tableStr + "</table>"; //添加到div中 $("#tableAjax").html(tableStr); }
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
- JQuery Ajax動(dòng)態(tài)生成Table表格
- jquery通過(guò)AJAX從后臺(tái)獲取信息并顯示在表格上的實(shí)現(xiàn)類(lèi)
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- 用Jquery實(shí)現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- JQuery通過(guò)AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- JQuery DataTable刪除行后的頁(yè)面更新利用Ajax解決
- jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
- jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能示例
相關(guān)文章
jQuery:delegate中select()不起作用的解決方法(實(shí)例講解)
本篇文章只要是對(duì)jQuery:delegate中select()不起作用的解決方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01jQuery EasyUI中對(duì)表格進(jìn)行編輯的實(shí)現(xiàn)代碼
對(duì)表格進(jìn)行增刪改后一次性保存或回滾的發(fā)生相當(dāng)有用。參照官方的教程例子做了個(gè)用戶(hù)管理的小例子。2010-06-06基于jQuery實(shí)現(xiàn)定位導(dǎo)航位置效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)定位導(dǎo)航位置效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11jQuery對(duì)象與DOM對(duì)象轉(zhuǎn)換方法詳解
這篇文章主要介紹了jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換方法,結(jié)合實(shí)例形式分析了jQuery對(duì)象及DOM對(duì)象的作用與二者的相互轉(zhuǎn)換技巧,需要的朋友可以參考下2016-05-05