jquery,ajax怎么动态更新表格
3个回答
展开全部
先定义一个表格,利用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=0;i<returnedData.length;i++){
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
}
});
}
<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=0;i<returnedData.length;i++){
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
}
});
}
展开全部
这个一般要结合数据库跟服务器端脚本(如:php、.net、java等)去实现
流程大概是这样
1、ajax根据情况发送get或post请求
jquery下写法非常简单
$.post("请求url地址",{传递参数,也可不传},function(data){这里根据data返回数据进行处理});
2、服务器端脚本接收请求后进行数据查询操作(当然也可以是其他操作,别更改、删除甚至上传文件),对查询结果进行处理返回(一般是返回json数据)
3、ajax接收到返回值进行处理,也就是1里function(data)的data
流程大概是这样
1、ajax根据情况发送get或post请求
jquery下写法非常简单
$.post("请求url地址",{传递参数,也可不传},function(data){这里根据data返回数据进行处理});
2、服务器端脚本接收请求后进行数据查询操作(当然也可以是其他操作,别更改、删除甚至上传文件),对查询结果进行处理返回(一般是返回json数据)
3、ajax接收到返回值进行处理,也就是1里function(data)的data
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
在jquery里可以直接用isNaN(),因为他是JavaScript的类库。
是由JavaScript语言写的。 例如: $(document).ready(function(){ alert(isNaN($('#id').val())); }); 可以直接使用
是由JavaScript语言写的。 例如: $(document).ready(function(){ alert(isNaN($('#id').val())); }); 可以直接使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询