js动态更新表格
定义一个空的table
<table id="table1"></table>
在js中定义 一个二维数组var s=eval([[1,1],[2,2]])
当加载数据的时候，先遍历table看有没有数据，如果没有一行一行的加载数据
如果有数据，就一行一行的更新，
如果更新的数据行数比原来的少，更新完后，就删除多余的行，
如果比原来的多，更新完后，就动态一行一行的添加数据
一次全部加载知道怎么做，请问逐行加载怎么做，谢谢
[解决办法]
修改table的innerHTML在IE8下会出错.建议用dom操作.
- HTML code
<!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秒左右。
- HTML code
<!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>