如何 把ajax返回json数据添加入表格

1、通过class取到<table class="easyui-datagrid" title="" style="width: 100%height: 250px">这一层的dom元素（假如这个dom叫tableDom吧）

var tableDom = $('easyui-datagrid')

2、for循环你data里面的list数组(假如data里面有个叫做list的存表格数据)

var html = '<tr>'

var list = data.list

for (var i = 0, len = list.length i < len i++) {

    html += '<td ..>' // 略哈。。总之这里就是要想办法把表格中数据拼出来, 和html里面的结构一样

}

html += '</tr>'

3、塞进tableDom就行

tableDom.html(html)

这是比较常规的做法。

先定义一个表格，利用ajax首先加载一次数据。

<table id="t2">

<tr>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">序号</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">总交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">成功交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">成功百分比(%)</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">失败交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">失败百分比(%)</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">未知交易数</span></div></td>

<td width="10%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">未知百分比(%)</span></div></td>

<td width="20%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">统计时间段</span></div></td>

</tr>

</table>

然后在页面定义一个ajax方法定时去后台查询数据就可以。

function loadData(){

$.ajax({

type: "POST",

url: "<%=path %>/two",

dataType: "json",

data:{'startTime':startTime,'endTime':endTime},

success: function(returnedData){//查询成功之后填充表格

var html = ""

var tdHead = "<td height='20'><div align='center'><span class='STYLE1'>"

var tdFoot = "</span></div></td>"

$("#t2 tr:gt(0)").remove()//第一行是table的表格头不需清除。

for(var i=0i<returnedData.lengthi++){

var countInfo = returnedData[i]

var totalCount = countInfo.totalCount

var sucCount = countInfo.sucCount

var failCount = countInfo.failCount

var unknowCount = countInfo.unknowCount

var sucPercent = countInfo.sucPercent

var failPercent = countInfo.failPercent

var unknowPercent = countInfo.unknowPercent

var countTimeZone = countInfo.countTimeZone

html += "<tr>" + tdHead + (i + 1) + tdFoot +

tdHead + totalCount + tdFoot +

tdHead + sucCount + tdFoot +

tdHead + sucPercent + tdFoot +

tdHead + failCount + tdFoot +

tdHead + failPercent + tdFoot +

tdHead + unknowCount + tdFoot +

tdHead + unknowPercent + tdFoot +

tdHead + countTimeZone + tdFoot + "</tr>"

}

$("#t2").append(html)//将新数据填充到table

}

})

}

---