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>

赞 (0)

相关推荐

  • JS控制表格隔行变色

    <table width="800" border="0" cellpadding="0" cellspacing="0">    <tr>        <td>不变色</td>    </tr>    <tbody id="goaler">    <tr>        <td>xxxxxxxx</td

  • js隔行变色、鼠标划过变色代码

    隔行变色且鼠标划过变色的效果 .container ul{margin:0;padding:0;} .container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px;text-indent:1em;font-size:12px;} .container .change{cursor:pointer;height:30px;width:200px;background-color:

  • Table隔行变色的JavaScript代码

    效果演示代码: 我们 www.jb51.net 我们 www.jb51.net 我们 www.jb51.net 我们 www.jb51.net function showtable(){ var color1 = "rgb(234,240,255)"; var color2 = "rgb(255,255,255)"; var bgColor = "rgb(255,255,193)"; var trs = document.getElementBy

  • js取模（求余数）隔行变色

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js取模隔行变色</title><script type="text/javascript"

  • javascript实现table表格隔行变色的方法

    本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title

  • JavaScript实现99乘法表及隔行变色实例代码

    JavaScript实现99乘法表及隔行变色实例代码

    项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现: 额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色. 嗯,我们一步步来吧! 99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解释,还不理解的同学可以仔细研究一下代码,研究一

  • JS小功能(列表页面隔行变色)简单实现

    JS小功能(列表页面隔行变色)简单实现

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <script type="text/javascript">        window.onload = function () {            var otab = document.getElementById('tab1');            var thiscolor

  • 高效的表格行背景隔行变色及选定高亮的JS代码

    这段JS放在head中 复制代码 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 { if (sTable.rows[i] != target) //判断是否当前

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • JS实现列表页面隔行变色效果

    JS实现列表页面隔行变色效果

    先看看隔行变色效果: 代码: <head runat="server"> <title></title> <script type="text/javascript"> window.onload = function () { var otab = document.getElementById('tab1'); var thiscolor = ''; for (var i = 0; i < otab.tBod

随机推荐