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

2019/6/29 22:45:03

编程Tag： jQuery 隔行变色

本文主要是介绍jQuery隔行变色与普通JS写法的对比，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 
<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> 

这篇关于jQuery隔行变色与普通JS写法的对比的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章