一段效率很高的for循环语句使用方法


Posted in Javascript onAugust 13, 2007

给表格的每行加上样式,注意for的第二个参数,当数组下标越界时,row=row[i]返回false,到此循环结束。

var rows = document.getElementsByTagName('tr');
for( var i = 0, row; row = rows[i]; i++ ) {
  row.className = 'newclass';
}
测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
li { margin-left:28px;}
.abc {background-color:#eee;font-size:14px; margin-bottom:10px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function a(){
 var row = document.getElementsByTagName("li");
 var t1 = new Date();
 for (var i=0,j; j=row[i]; i++)
 {
  j.className="abc";
 }
 var t2 = new Date();
 alert("耗时 "+(t2-t1).toString()+" 毫秒");
}
function b(){
 var row = document.getElementsByTagName("li");
 var t1 = new Date();
 for (var i=0; i<row.length; i++)
 {
  row[i].className="abc";
 }
 var t2 = new Date();
 alert("耗时 "+(t2-t1).toString()+" 毫秒");
}
function c(){
 var j="<ol>";
 for (var i=0; i<2000; i++)
 {
  j=j+"<li>测试文字</li>";
 }
 j=j+"</ol>";
 document.getElementById("box").innerHTML = j;
}
//-->
</SCRIPT>
</head>
<BODY>
<input type="button" value="CreateTable" onclick="c()" />
<input type="button" value="Test old method!" onclick="b()" />
<input type="button" value="Test new method!" onclick="a()" />
<input type="button" value="Clear" onclick="document.getElementById('box').innerHTML='';" />
<div id="box"></div>
</BODY>
</HTML>

Javascript 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
javascript实现轮显新闻标题链接
Aug 13 #Javascript
document.open() 与 document.write()的区别
Aug 13 #Javascript
js小技巧--自动隐藏红叉叉
Aug 13 #Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 #Javascript
用js实现随机返回数组的一个元素
Aug 13 #Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 #Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 #Javascript
You might like
php数据库连接
2006/10/09 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
php可变长参数处理函数详解
2017/02/22 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python 递归函数详解及实例
2016/12/27 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
爱我中华教学反思
2014/04/28 职场文书
领导干部作风建设总结
2014/10/23 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers