美洲杯波胆_美洲杯波胆赔率
做最好的网站
来自 计算机教程 2019-08-01 12:06 的文章
当前位置: 美洲杯波胆 > 计算机教程 > 正文

jQuery 【美洲杯波胆】ajax实现动态添加表格tr td功

本文实例讲述了jQuery ajax实现动态添加表格tr td功能。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery ajax动态生成table的方法。分享给大家供大家参考,具体如下:

功能:ajax获取后台返回数据给table动态添加tr/td

$(function(){
 ajaxT();
});
function ajaxT(){
 $.ajax({
   type:"POST",
   dataType: "json",
   url:"<%=basePath%>UserInfoServlet",
   data:"doaction=userList",
   success:function(data){
   createShowingTable(data);
}
}
);
}
//动态的创建一个table
function createShowingTable(data) {
 var tableStr = "<table class='tab-list' width='99%'>";
 tableStr = tableStr
     "<tr class='list-header'>"
    "<td width='5%'>序号</td>"
    "<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
    "<td width='30%'>用户姓名</td>"
    "<td width='20%'>工号</td>"
    "<td width='20%'>职位</td>"
    "<td width='20%'>创建时间</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'>"  暂无记录   "</font></td>"
   "</tr>";
 }
 tableStr = tableStr   "</table>";
 //添加到div中
 $("#tableAjax").html(tableStr);
}

html部分:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结

<table>
<tbody></tbody>
</table>

希望本文所述对大家jQuery程序设计有所帮助。

ajax部分:

您可能感兴趣的文章:

var year = $('#year').val();//下拉框数据
var province= $('#province').val();//下拉框数据
$('table tbody').html('');
$.ajax({
  url:"/Plan/sendJson.html",
  type:"get",
  data:{
     'year':year,
     'province':province
  },
  datatype:'json',
  success:function(data){
     switch(data.msg)
     {
        case '0':
            $('table tbody').prepend('<tr><td colspan='2'>暂无数据</td></tr>');break;
        case '1':
            $.each(data.data,function(i,n){
var $tr = $("<tr>" 
"<td>" n.year "</td>" 
"<td>" n.province "</td>" 
"</tr>");
var $table = $('table tbody');
$table.append($tr);
});
}
}
})

本文由美洲杯波胆发布于计算机教程,转载请注明出处:jQuery 【美洲杯波胆】ajax实现动态添加表格tr td功

关键词: