jquery，ajax怎么动态更新表格

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

<table id="t2">

<tr>

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

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

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

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

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

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

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

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

<td width="20%" height="22" background="images/bggif" 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<returnedDatalength;i++){

var countInfo = returnedData[i];

var totalCount = countInfototalCount;

var sucCount = countInfosucCount;

var failCount = countInfofailCount;

var unknowCount = countInfounknowCount;

var sucPercent = countInfosucPercent;

var failPercent = countInfofailPercent;

var unknowPercent = countInfounknowPercent;

var countTimeZone = countInfocountTimeZone;

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为tab

var

trHTML

=

"<tr><td></td></tr>"

$("#tab")append(trHTML);//在table最后面添加一行

$("#tab

tr:eq(2)")after(trHTML);

//

在table的第3行后面添加一行

这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var

trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行

$(function()

{

$(":button")click(function()

{

var

tr

=

"<tr><td>new</td></tr>";

//$("table")append(tr);

$("table

tr:eq(2)")after(tr);

});

});

这是我测试用的代码，你可以运行看看

步骤

打开DreamWeaver，新建一个htm5的页面

下载Jquery Mobile的库文件

然后在页面中引用库文件，注意库文件的引用顺序，需要引用的是mincss而不是普通的css文件。jqueryjs的引用要在jquerymobileminjs的引用之前

在body里面新建一个div，将其data-role设置为page表示是一个页面。

然后在div中插入一个main DIV,再在div中插入一个包含thead和tabody的table表格。

插入之后，可以先在浏览器中查看一下内容，可以看到只是几行字，一点样式都没有，这就需要为其添加Jquery Mobile中的样式

为其添加data-role="table"和其他属性，不用再另添加新的样式，就可以使得表格更像一个表格

这样，表格就做好了。其可以随着页面的放大而改变自己的样式，与屏幕相适应。

你用jquery的话，append是需要加jquery对象的，你的selectTr明显就是一个字符串，可以改写成如下两种方法：

1、var selectTr = $"(这里写你的字符串");

2、documentgetElementById("表格id")innerHTML = "这里写你的字符串";

在后台捕获异常，如果你是用的MVC的话，然后再返回一个json错误页面，错误页面的内容是

{success:false;message:"后台出错！"}

对应的前台就可以这样写

success: function(data){

if(datasuccess){

alert(“成功！");

}else{

alert(datamessage);

}

关键是你通过ajax调用的页面最终返回json，而且该json内容包含可判断的信息。

以上就是关于jquery，ajax怎么动态更新表格全部的内容，包括:jquery，ajax怎么动态更新表格、如何通过jquery动态给表格添加一行、我在jquery mobile里怎么实现表格等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！