日期:2014-05-17 浏览次数:20756 次
借助createDocumentFragment创建的table效果:

代码片段1:
<fieldset>
<legend><em class="t-tool t-tool-toggle"> </em>案件资料</legend>
<table border=1 cellPadding=0 cellSpacing=0 style="margin:5px;width:840px;">
<tr><th width="40px" style="text-align:center;">序号</th><th width="480px" style="text-align:center;">名称</th><th width="90px" style="text-align:center;">分类</th><th width="160px" style="text-align:center;">上传时间</th><th width="70px" style="text-align:center;"> </th></tr>
<tbody id="case_files">
</tbody>
</table>
</fieldset>
?
?
代码片段2:
var documentFragment = document.createDocumentFragment();
for(var j=0,len=o.resultList.length;j<len;j++){
var d = o.resultList[j];
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var txt1 = document.createTextNode((j+1));
td1.width = "40px";
td1.style.textAlign = 'center';
var td2 = document.createElement('td');
var txt2 = document.createTextNode(d['DOWNLOAD_FILE_NAME']);
td2.width = "480px";
var td3 = document.createElement('td');
var txt3 = document.createTextNode(d['TITLE']);
td3.width = "90px";
td3.style.textAlign = 'center';
var td4 = document.createElement('td');
var txt4 = document.createTextNode(d['CREATE_TIME']);
td4.width = "160px";
td4.style.textAlign = 'center';
var td5 = document.createElement('td');
td5.width = "70px";
td5.style.textAlign = 'center';
var link = document.createElement('a');
link.href = Spider.getAppName()+'/file/storage/download.json?fileId='+d['FILE_ID']+'&isOnLine=no';
var txt5 = document.createTextNode('下载');
link.appendChild(txt5);
td1.appendChild(txt1);
td2.appendChild(txt2);
td3.appendChild(txt3);
td4.appendChild(txt4);
td5.appendChild(link);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
documentFragment.appendChild(tr);
}
document.getElementById("case_files").appendChild(documentFragment);
?
在使用过程中曾经试过用innerHTML = "<tr><td>test</td></tr>......";发现有时候存在浏览器兼容问题和效率问题。
借助createDocumentFragment还可以防止页面闪屏的问题。