js动态更新表格,该如何解决
日期：2014-05-16 浏览次数：20486 次
js动态更新表格
定义一个空的table
<table id="table1"></table>
在js中定义 一个二维数组var s=eval([[1,1],[2,2]])
当加载数据的时候，先遍历table看有没有数据，如果没有一行一行的加载数据
如果有数据，就一行一行的更新，
如果更新的数据行数比原来的少，更新完后，就删除多余的行，
如果比原来的多，更新完后，就动态一行一行的添加数据
一次全部加载知道怎么做，请问逐行加载怎么做，谢谢
------解决方案--------------------
修改table的innerHTML在IE8下会出错.建议用dom操作.
定义一个空的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.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
