编程 Javascript

jQuery隔行变色与普通JS写法的对比

Posted in Javascript onApril 21, 2013

<style type="text/css"> 
body { 
font-size:12px;text-align:center; 
} 
#tbStu { 
width:260px;border:1px solid #666;background-color:#eee; 
} 
#tbStu tr { 
line-height:23px; 
} 
#tbStu tr th { 
background-color:#ccc;color:#fff; 
} 
#tbStu .trOdd { 
background-color:#fff; 
} 
</style> 
<script src="jQuery/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
//普通JS写法 
//window.onload = function () { 
// var oTb = document.getElementById('tbStu'); 
// for (var i = 0; i < oTb.rows.length-1; i++) { 
// if (i % 2) 
// { 
// oTb.rows[i].className = "trOdd"; 
// } 
// } 
//} 
//jQuery选择器写法（选择table的行，隔一行，选择一行） 
$(function () { 
$('#tbStu tr:nth-child(even)').addClass("trOdd"); 
//jQuery给一个DIV复制内容时，不需要检测该DIV是否存在 
// $('#divMain').html('这是一个检测页面'); 
}) 
</script> 
</head> 
<body> 
<table id="tbStu" cellpadding="0" cellspacing="0" > 
<tbody> 
<tr> 
<th>学号</th><th>姓名</th><th>性别</th><th>部分</th> 
</tr> 
<tr> 
<td>1001</td><td>张小明</td><td>男</td><td>320</td> 
</tr> 
<tr> 
<td>1002</td><td>李明琪</td><td>女</td><td>350</td> 
</tr> 
<tr> 
<td>1003</td><td>张三</td><td>男</td><td>150</td> 
</tr> 
</tbody> 
</table> 
</body>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 函数的副作用分析

Aug 23 Javascript

js Array对象的扩展函数代码

Apr 24 Javascript

JavaScript 函数惰性载入的实现及其优点介绍

Aug 12 Javascript

jquery遍历checkbox介绍

Feb 21 Javascript

JavaScript实现在数组中查找不同顺序排列的字符串

Sep 26 Javascript

jQuery循环遍历子节点并获取值的方法

Apr 14 Javascript

Sea.JS知识总结

May 05 Javascript

js/jquery控制页面动态加载数据滑动滚动条自动加载事件的方法

Feb 08 Javascript

Angular2实现自定义双向绑定属性

Mar 22 Javascript

vue实现带复选框的树形菜单

May 27 Javascript

vue element 关闭当前tab 跳转到上一路由操作

Jul 22 Javascript

几款主流好用的富文本编辑器（所见即所得常用编辑器）介绍

Mar 17 Javascript

jQuery模拟超链接点击效果代码

Apr 21 #Javascript

jquery 元素控制(追加元素/追加内容)介绍及应用

Apr 21 #Javascript

jquery 动态创建元素的方式介绍及应用

Apr 21 #Javascript

jQuery弹出(alert)select选择的值

Apr 21 #Javascript

jQuery登陆判断简单实现代码

Apr 21 #Javascript

JQuery操作Select的Options的Bug(IE8兼容性视图模式)

Apr 21 #Javascript

Jquery submit()无法提交问题

Apr 21 #Javascript