日期:2014-05-17 浏览次数:20614 次
借助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还可以防止页面闪屏的问题。