table表格隔行变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name='description' content='表格的高级应用'>
<title>表格的高级应用</title>
<script src="../jquery.js"></script>
<script>
window.onload = function () {
var oTab = document.getElementById('tab1'); for (var i=0; i<oTab.tBodies[0].rows.length; i++){
if(i%2){
oTab.tBodies[0].rows[i].style.background='red';
}else {
oTab.tBodies[0].rows[i].style.background='green';
}
}
}
</script>
</head>
<body>
<table id="tab1" border='1' width="500px">
<thead>
<tr>
<td>ID</td>
<td>gender</td>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>male</td>
<td>John</td>
</tr>
<tr>
<td>02</td>
<td>female</td>
<td>Ann</td>
</tr>
<tr>
<td>03</td>
<td>female</td>
<td>Merry</td>
</tr>
<tr>
<td>04</td>
<td>female</td>
<td>Jessis</td>
</tr>
<tr>
<td>05</td>
<td>male</td>
<td>Jack</td>
</tr>
<tr>
<td>ID</td>
<td>男</td>
<td>Apollo</td>
</tr>
</tbody>
</table> </body>
</html>
table表格隔行变色的更多相关文章
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- css3表格隔行变色和表格选中变颜色代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用JQuery实现表格隔行变色和突出显示当前行
用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 表格隔行变色_jQuery控制实现鼠标悬停高亮
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- JavaScript for循环实现表格隔行变色
本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
随机推荐
- jeffy-vim-v2.8.tgz
vim 配置 jeffy-vim-v2.8.tgz
- doviceone- http组件进行webservice的POST请求
var http = mm("do_Http"); http.method = "POST"; // GET | POST http.timeout = 100 ...
- Manifest值冲突解决方法
FBI Warning:欢迎转载,但请标明出处:http://blog.csdn.net/codezjx/article/details/38669939,未经本人同意请勿用于商业用途,感谢支持! 整 ...
- MetaQ对接SparkStreaming示例代码
由于JavaReceiverInputDStream<String> lines = ssc.receiverStream(Receiver<T> receiver) 中 没有 ...
- 2016.7.14 去掉Mybatis Generator生成的一堆 example
参考资料: http://www.cnblogs.com/zerocold/p/4220955.html mybatis generator自动生成的代码里老是有一堆example,需要改的时候, ...
- TP框架模板中ifelse
{if $_username}<ul class="afterLogin"> <li class="username"><a ...
- ICON小工具如何使用
对于ICON这个小资源,我们可以手动绘制.选择bmp图形的大小,尤其是旁边的选择工具(矩形或者弧形),我们可以通过选择工具挪动我们手动绘制的图标,其实图标只有中间那部分有用,其他没有用.还有最右边色拾 ...
- pom.xml基础配置
pom.xml基础配置: maven中,最让我迷惑的还是那一堆配置! 就拿这个属性配置来说: 我需要让整个项目统一字符集编码,就需要设定 <project.build.sourceEncodin ...
- 【甘道夫】Hadoop2.2.0 NN HA具体配置+Client透明性试验【完整版】
引言: 前面转载过一篇团队兄弟[伊利丹]写的NN HA实验记录,我也基于他的环境实验了NN HA对于Client的透明性. 本篇文章记录的是亲自配置NN HA的具体全过程,以及全面測试HA对clien ...
- HDFS源码分析DataXceiver之整体流程
在<HDFS源码分析之DataXceiverServer>一文中,我们了解到在DataNode中,有一个后台工作的线程DataXceiverServer.它被用于接收来自客户端或其他数据节 ...