利用HTML和JS制作隔行换背景颜色的表格
1、源代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黄石港区民主党派成员登记表</title>
<script type="text/javascript">
function xlh(){
var tbl = document.getElementById("tbl");
var rows = tbl.rows.length;
for(var i=0;i<rows;i++){
if(i%2 == 0){
tbl.rows[i].style.backgroundColor = "#cccccc";
}
}
}
</script>
</head>
<body onload="xlh()" bgcolor=antiquewhite>
<h1 align="center">黄石港区民主党派成员登记表</h1>
<table id="tbl" cellpadding="10" cellspacing="0" border="1" align="center">
<tr>
<td>党派名称</td>
<td>姓名</td>
<td>性别</td>
<td>出生年月</td>
<td>籍贯</td>
<td>名族</td>
<td>加入党派时间</td>
<td>文化程度</td>
<td>所在工作单位及职务</td>
<td>社会职务</td>
<td>联系电话</td>
<td>所属社区</td>
<td>所属网络</td>
<td>操作</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr><tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
2、运行效果如下:

利用HTML和JS制作隔行换背景颜色的表格的更多相关文章
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- jquery点击tr换背景颜色
jquery点击tr换tr的背景颜色,table的id为db-list1jQuery(function() { jQuery("#db-list1 tr").click( func ...
- js之隔行换色
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- css和js处理隔行换色的问题
<html> <head> <meta charset="utf-8"> <meta name="" conten ...
- EasyUI中DataGrid隔行改变背景颜色。
<table id="dg" class="easyui-datagrid" style="width: 1000px; height: 300 ...
- OpenCV实现彩色图像轮廓 换背景颜色
转摘请注明:https://i.cnblogs.com/EditPosts.aspx?opt=1 有时候我们需要不一样颜色的证件照,下面就用OpenCV来实现证件照的蓝底.红底等换颜色: 代码如下: ...
- js和jquery修改背景颜色的区别
html: <HTML> <head> <meta http-equiv="content-type" content="text/html ...
- js修改隔行tr的颜色。
<!DOCTYPE html><html lang="zh-Hans"><head> <meta charset="UTF-8& ...
- JS练习:定时器--背景颜色交替变换
代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...
随机推荐
- #region 自适应屏幕分辨率
#region 自适应屏幕分辨率 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)] public ...
- HttpClient_httpclient中使用HTTPS的方法
import javax.net.ssl.SSLContext; import javax.net.ssl.TrustManager; import javax.net.ssl.X509TrustMa ...
- C# DateTime 日期加1天 减一天 加一月 减一月 等方法(转)
//今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-1).ToShortDateStrin ...
- 像jQuery那样,采用链式方法,封装一个方法:CSS()
主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> &l ...
- asp.net 微信企业号办公系统-流程设计--保存与发布
如果流程未设计完时可以先保存,以后再打开接着设计.点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计,则可以打开该流程继续设计: 如果流程设计完成,可以点击安装按钮来发布流程,流程安装成 ...
- javascript 数据类型 变量 类型转换运算符
数据类型: 1.字符串(被双引号所包含的内容),小数,整数,日期时间,布尔型等. 2.变量: 都是通用类型的var, 定义一个变量格式:var a: 3.类型转换: 分为自动转换和强制转换,一般 ...
- 用wampserver 装的集成环境,命令行进不去提示mysql
命令行进不去提示mysql 不是内部命令或外部命令. 解决办法,就是将mysql/bin路径加到path中去
- POJ 2533 Longest Ordered Subsequence(LIS模版题)
Longest Ordered Subsequence Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 47465 Acc ...
- NBOJv2 1022 短信篮球(种类并查集)
Problem 1022: 短信篮球 Time Limits: 1000 MS Memory Limits: 65536 KB 64-bit interger IO format: %lld ...
- Javascript 笔记与总结(2-4)Javascript 内置对象
① String 字符串对象 fromCharCode() 静态方法, 用作为参数而传递的字符代码创建一个新的字符串. length 字符串的长度. charAt() 抽取字符串中指定位置的字符. c ...