jquery,ajax怎么动态更新表格

jquery,ajax怎么动态更新表格,第1张

先定义一个表格,利用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

}

})

}

var paras = {}

$("cmdbutton :input").each(function()

{

    paras[$(this).attr("name")] = $(this).val()// 读取设置参数

})

$.post("url", paras, function(data) // 后台地址, 参数, 后台返回的数据

{

    // 进行你需要的 *** 作就ok了

})

// 希望采纳

// 我qq: 745698872 不懂的可以问我


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/6657827.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-26
下一篇 2023-03-26

发表评论

登录后才能评论

评论列表(0条)

保存