javascript代码实例教程-使用jQuery实现隔行变色

发布时间:2019-05-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用jQuery实现隔行变色脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

<head>
<!--什么是选择器?
jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jquery选择器对页面元素的精准定位,才能完成元素性和行为的处理。
选择器的优势?
与传统的JavaScript获取页面元素和便携食物相比,jQuery选择器具有明显的优势,具体表现在一下两个方面:
*代码更简单
*完善的检测机制
-->
&nbsp;   <tITle></title>

    <script src="jquery-1.9.1.js" tyPE="text/javascript"></script>

 


<style type="text/css">
body{font-Size:12px;text-align:center;}
#tbStu{width:260px;border:solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px;}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<!--    使用javaScript实现隔行变色-->
<!--
<script type="text/javascript">
    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";
            }
        }
    }
</script>
-->


<!-- 使用jQuery选择器实现隔行变色-->
<script type="text/javascript">
    $(function () {
        $('#tbStu tr:nth-child(even)').addClass('trOdd');
    })
</script>


</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr><th>学号</th><th>姓名</th><th>性别</th><th>总分</th></tr>
<tr><td>001</td><td>张三</td><td>男</td><td>100</td></tr>
<tr><td>002</td><td>李四</td><td>女</td><td>100</td></tr>
<tr><td>003</td><td>王五</td><td>男</td><td>100</td></tr>
<tr><td>004</td><td>赵六</td><td>女</td><td>100</td></tr>
<tr><td>005</td><td>周七</td><td>男</td><td>100</td></tr>
<tr><td>006</td><td>王八</td><td>女</td><td>100</td></tr>
</tbody>
</table>
</body>
 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-使用jQuery实现隔行变色全部内容,希望文章能够帮你解决javascript代码实例教程-使用jQuery实现隔行变色所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。