手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
摘要:非侵入实现,控制更方便效果图:复制代码代码如下:javascriptpracticetable{width:300px;}caption{b...

非侵入实现,控制更方便

效果图:

jquery实现表格奇数偶数行不同样式(有图为证及实现代码)1

复制代码 代码如下:

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>javascript practice</title>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<style type="text/css">

table{width:300px;}

caption{background:#DCA;}

th{background:#FCA;width:50%;}

td{text-align:center;}

</style>

<script type="text/javascript">

$(document).ready(function(){

odd= {"background":"#EDA","color":"#3F5"};//奇数样式

even={"background":"#2DA","color":"#875"};//偶数样式

odd_even("#table_test",odd,even);

});

function odd_even(id,odd,even){

$(id).find("tr").each(function(index,element){

if(index%2==1)

$(this).css(odd);

else

$(this).css(even);

});

}

</script>

</head>

<body>

<table id="table_test">

<caption>标题<caption>

<tr>

<th>name</th>

<th>age</th>

</tr>

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>张</td>

<td>李</td>

</tr>

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>张</td>

<td>李</td>

</tr>

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>张</td>

<td>李</td>

</tr>

<tr>

<td>张</td>

<td>李</td>

</tr>

<tr>

<td>A</td>

<td>B</td>

</tr></li>

</body>

</html>

【jquery实现表格奇数偶数行不同样式(有图为证及实现代码)】相关文章:

js实现异步循环实现代码

jQuery实现html表格动态添加新行的方法

JS函数实现鼠标指向图片后显示大图代码

jQuery解析XML文件同时动态增加js文件的方法

jquery使用each方法遍历json格式数据实例

jQuery使用zTree插件实现树形菜单和异步加载

jquery实现的判断倒计时是否结束代码

javascript动态创建表格及添加数据实例详解

jquery合并表格中相同文本的相邻单元格

jQuery实现在列表的首行添加数据

精品推荐
分类导航