JS加载大量input控件的快速方法
2012-11-13 来源：网络
【实例名称】
JS加载大量input控件的快速方法
【实例描述】
有些数据编辑页面需要显示大量的input控件(200个以上)。本例学习如何快速显示大量的input控件以提高页面的响应速度。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧（www.xue51.com）</title> </head> <body> <form> <script language="javascript"> var d = 200; var tmpTableStr=new Array(); var tempArrayLength=0; tmpTableStr[tempArrayLength++]= "<table width=\"100%\" border=\"1\" id=aaaa>"; for(i=1;i<d;i++) { tmpTableStr[tempArrayLength++]="<tr>"; tmpTableStr[tempArrayLength++]="<td id=\"td1\" width=40% >"; tmpTableStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip1\" value=\"第一列姓名\">"; tmpTableStr[tempArrayLength++]="<\/td>"; tmpTableStr[tempArrayLength++]="<td id=\"td2\" width=40% >"; tmpTableStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip2\" value=\"第二列年龄\">"; tmpTableStr[tempArrayLength++]="<\/td>"; tmpTableStr[tempArrayLength++]="<td id=\"td3\" width=30% >"; tmpTableStr[tempArrayLength++]="<input type=\"text\" id=\"dgip\" name=\"ip3\" value=\"第三列地址\">"; tmpTableStr[tempArrayLength++]="<\/td>"; tmpTableStr[tempArrayLength++]="<\/tr>"; } tmpTableStr[tempArrayLength++]="</table>" document.write(tmpTableStr.join('')); </script>
</form> </body> </html>
【运行效果】
【难点剖析】
提高速度一直是web应用程序开发的重点，通过本例可以学习两个知识点，如何动态添加input和如何提高加载速度。本例中使用table控件页面的布局，使用td的“width”属性控制每列的宽度，然后使用循环依次添加控件。本例中加载200个控件的用时不超过三秒。
【源码下载】
为了JS代码的准确性，请点击：js加载大量input控件的快速方法 进行本实例源码下载
