js动态更新表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script>
     function UpdateTable() {
     //先把数据全部
     //var test = "";
     var  g_WksArray;
         var tablestr;
     var newstr;
     for (var i = 0; i < g_WksArray.length; i++) {
     tablestr += "<tr>";
     //写一行数据
     for (var n = 0; n < g_WksArray.length; n++) {
     newstr = "<td style='cursor:pointer'>" + g_WksArray[i][n] + "</td>";
     tablestr += newstr;
     }
     tablestr += "</tr>";
     }
     document.getElementById("table1").innerHTML = tablestr;
     }
    </script>
</head>
<body>
<input type="button" onclick="UpdateTable();" />
<table id="table1"></table>
</body>
</html>

var table = document.createElement("table");
for(...)
{
var row = table.insertRow(-1); //加入行
    for(...)
    {
       var cell = row.insertCell(-1); //加入单元格
         cell.XXX=...   //赋值
    }}

坦白说我看不明白你想要做什么，有数据进来加载可以理解，但更新这回事，是依据什么来更新的？后面说的一大堆，完全看不明白。操作table是最容易不过的事了

根据 tr行和数据行的最大行数进行循环如此有3中状态tr[i]行有 data[i]行有则更新 tr[i]行tr[i]行没有 data[i]行有则添加 tr[i]行tr[i]行有 data[i]行没有则删除（或隐藏）tr[i]行

具体的写法是什么，
例如：现在共有n行tr，传入的数据data 共有i行
怎样逐行把tr中的数据替换

修改table的innerHTML在IE8下会出错.建议用dom操作.<!doctype html >
<html>
<head>
<title> new document </title>
<script type="text/javascript">
var d1 = [[1,1],[2,2],[3,3]];
var d2 = [[11,1],[22,2]];
var d3 = [[1,11],[2,22],[3,33],[4,44]];
var Table = function(element){
this.element = document.getElementById(element);
};
Table.prototype = {
add : function(data){
var e = this.element, body = null;
for(var i = 0; i < data.length; i++){
var tr = e.insertRow();
for(var j = 0; j < data[i].length; j++){
var td = tr.insertCell();
td.innerHTML = data[i][j];
tr.appendChild(td);
}
if(!body) body = e.getElementsByTagName("tbody")[0];
body.appendChild(tr);
}
},
update : function(data){
var e = this.element, len = e.rows.length, body = null;
for(var i = 0; i < data.length && i < len; i++){
for(var j = 0; j < data[i].length; j++){
e.rows[i].cells[j].innerHTML = data[i][j];
}
}
if(i < len){
for(var n = len - 1; n >= i; n--){
e.deleteRow(n);
}
}else if(i < data.length){
this.add(data.slice(i));
}
}
};
window.onload = function(){
var n = 1, t = new Table("table1");
t.add(d1);
document.getElementById("button1").onclick = function(){
if(n++ < 3){
t.update(window["d"+n]);
}
};
};
</script>
</head>
<body>
<input type="button" id="button1" value="update" /><br/>
<table id="table1"></table>
</body>
</html>

有多少条数据呢？
改用文档碎片添加，速度要快些。更新2000条在IE8下0.7秒，chrome 0.1秒左右。<!doctype html >
<html>
<head>
<title> new document </title>
<script type="text/javascript">
var d1 = [[1,1],[2,2],[3,3]];
var d2 = [[11,1],[22,2]];
var d3 = [[1,11],[2,22],[3,33],[4,44]];
var Table = function(element){
this.element = document.getElementById(element);
};
Table.prototype = {
add : function(data){
var e = this.element, body = null, f = document.createDocumentFragment();
for(var i = 0, len = data.length; i < len; i++){
var tr = document.createElement("tr");
for(var j = 0; j < data[i].length; j++){
var td = document.createElement("td");
td.innerHTML = data[i][j];
tr.appendChild(td);
} f.appendChild(tr);
}
body = e.getElementsByTagName("tbody")[0] || e;
body.appendChild(f);
},
update : function(data){
var e = this.element, len = e.rows.length;
for(var i = 0, dl = data.length; i < dl && i < len; i++){
for(var j = 0; j < data[i].length; j++){
e.rows[i].cells[j].innerHTML = data[i][j];
}
}
if(i < len){
for(var n = len - 1; n >= i; n--){
e.deleteRow(n);
}
}else if(i < data.length){
this.add(data.slice(i));
}
}
};
window.onload = function(){
for(var i = 0; i < 1000; i++){
d1[i] = [i, i];
}
for(var i = 0; i < 500; i++){
d2[i] = [i+1, i];
}
for(var i = 0; i < 2000; i++){
d3[i] = [i, i+1];
}
var n = 1, t = new Table("table1"), t1 = new Date();
t.add(d1);
upTimer(t1, new Date());
document.getElementById("button1").onclick = function(){
if(n++ < 3){
t1 = new Date();
t.update(window["d"+n]);
upTimer(t1, new Date());
}
};
function upTimer(t1, t2){
document.getElementById("timer").innerHTML = (t2 - t1) / 1000 + "秒";
}
};
</script>
</head>
<body>
<input type="button" id="button1" value="update" /> <span id="timer"></span><br/>
<table id="table1"></table>
</body>
</html>

调试易

js动态更新表格

解决方案 »