一、操作table,本例子实现的功能:

1.table等宽边框
2.table斑马线
3.实现table多表头
4.焦点所在行高亮
5.自动计算总分

二、效果图

三、代码:

 <!DOCTYPE html>
<html>
<head>
<!--表格-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="html表格操作实例,table等宽边框,table斑马线,实现table多表头,焦点所在行高亮,自动计算总分">
<meta name="KEYWords" content="html table jquery">
<title>表格-斑马线</title>
<!--使用百度CDN-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
table,td,th,li,h1,p,input{
margin:0px;
padding:0px;
}
p{text-align:left;margin:30px;}
body{
text-align:center;
}
table input{
text-align:center;
width:50px;
}
.cententTop{
width:80%;
height:50%;
margin-left:auto;
margin-right:auto;
}
.left img{
width:60%;
height:60%;
}
.left,.right{
width:60%;
height:30%;
margin-left:auto;
margin-right:auto;
border:1px solid red;
padding:10px;
}
table{
margin-left:auto;
margin-right:auto;
border-top:1px solid #99CC00;
border-right:1px solid #99CC00;
}
table td,th{
margin:5px;
padding:10px;
border-bottom:1px solid #99CC00;
border-left:1px solid #99CC00;
}
.even_row{
background-color:#FFF7C0;
opacity:0.6;
}
.odd_row{
background-color:yellow;
opacity:0.6;
}
p{
margin:10px;
padding:10px;
}
</style>
</head>
<body onload="loader()">
<div class="cententTop">
<div class="centent left">
<img src="http://www.open-open.com/bbs/uploadImg/20111012/20111012104637_158.png"></img>
</div>
<div class="centent right">
<table class="score" cellspacing="0">
<caption>成绩单</caption>
<thead>
<tr>
<th rowspan="2">
姓名
</th>
<th rowspan="2">
班级
</th>
<th colspan="4">
成绩
</th>
</tr>
<tr>
<th>
语文
</th>
<th>
数学
</th>
<th>
英语
</th>
<th>
总分
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
张三
</td>
<td>
一班
</td>
<td>
<input type="text" value="90"/>
</td>
<td>
<input type="text" value="80"/>
</td>
<td>
<input type="text" value="96"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
李四
</td>
<td>
三班
</td>
<td>
<input type="text" value="96"/>
</td>
<td>
<input type="text" value="88"/>
</td>
<td>
<input type="text" value="96"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
王五
</td>
<td>
一班
</td>
<td>
<input type="text" value="85"/>
</td>
<td>
<input type="text" value="80"/>
</td>
<td>
<input type="text" value="88"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
赵六
</td>
<td>
一班
</td>
<td>
<input type="text" value="80"/>
</td>
<td>
<input type="text" value="90"/>
</td>
<td>
<input type="text" value="88"/>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<p>
<b>
1.table等宽边框
2.table斑马线
3.实现table多表头
<br/>
4.焦点所在行高亮
5.自动计算总分
</b>
</p>
</div>
</div>
<script>
function loader() {
setZebraLine();
setMouseover();
setTotal();
//console.log($("table input"));
};
//设置斑马线
function setZebraLine() {
$("tbody>tr:odd").addClass("odd_row");
$("tbody>tr:even").addClass("even_row");
};
//焦点所在行高亮
function setMouseover() {
$("tbody>tr").bind("mouseover", function() {
$(this).css("opacity", "1");
});
$("tbody>tr").bind("mouseout", function() {
$(this).css("opacity", "0.6");
});
};
//计算总分
function setTotal() {
$(".score tbody tr").each(function() {
var r = $(this).find("input");
var total = parseInt(r.eq(0).val()) + parseInt(r.eq(1).val()) + parseInt(r.eq(2).val());
$(this).find("td:last").text(total);
});
}
$(".score tbody input").bind("change", function() {
var r = $(this).parent().parent().find("input");
r = $(this).parents("tr").find("input");
//console.log(r);
var total = parseInt(r.eq(0).val()) + parseInt(r.eq(1).val()) + parseInt(r.eq(2).val());
$(this).parents("tr").find("td:last").text(total);
});
</script>
</body>
</html>

table操作:边框-斑马线-多表头-焦点高亮-自动求和的更多相关文章

  1. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  2. QT窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透

    qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透 窗口置顶qt 里是 setWindowFlags(Qt::WindowStaysOnTopHint)kde 里 ...

  3. 5种做法实现table表格中的斜线表头效果

    table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...

  4. Oracle索引梳理系列(十)- 直方图使用技巧及analyze table操作对直方图统计的影响(谨慎使用)

    版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

  5. table 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. css如何让表格table的边框为1像素呢

    在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...

  7. MySQL DROP TABLE操作以及 DROP 大表时的注意事项【转】

    删表 DROP TABLE Syntax DROP [TEMPORARY] TABLE [IF EXISTS] tbl_name [, tbl_name] ... [RESTRICT | CASCAD ...

  8. mysql批量进行optimize table操作

    数据库运行一段时间后,有可能会有磁盘磁片产生,此时我们需要进行optimize table操作 # 获取需要optimize的表:如下为获取总大小小于80G的表进行操作:mysql -utroot - ...

  9. Html table 细边框

    Html table 细边框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. C++开发过程多线程同步lock的实现

    在程序开发过程经常使用到多线程,而多线程始终与锁存在紧密地联系,以下详细的介绍如何在C++程序开发过程中自定义锁的几种方法. 1. 下面给出一段代码展现如何通过Mutex实现锁的功能(window p ...

  2. Python中format的用法

    自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式化字符串相比,有什么优越的存在呢?让我们来揭开它羞答答的面纱.语法 它通过{}和: ...

  3. 理解钩子Hook以及在Thinkphp下利用钩子使用行为扩展

    什么是钩子函数 个人理解:钩子就像一个”陷阱”.”监听器”,当A发送一个消息到B时,当消息还未到达目的地B时,被钩子拦截调出一部分代码做处理,这部分代码也叫钩子函数或者回调函数 参考网上说法 譬如我们 ...

  4. jquery 轮播图

    slider.js (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index ...

  5. Linux系统下给VMWare安装Tools

    1.进入Linux系统. 2.在VMware的窗口菜单中选VM >> install VMware Tools,虚拟机自动将VMware-tools装入虚拟光驱中. 3.在虚拟光驱里找出V ...

  6. [getLongestLength] 加和为0的最长子串长度

    点击这里查看原文 假设一个数组仅仅由1和-1组成,求该数组的和为0的最长子串的长度. 例如: {1,-1,1,-1,1,1,1} 输出:4. 昨天机试的时候做到这道题,不会做,今天思考一下. 普通的解 ...

  7. 有关java中的final关键字

    在java中,可能使用到final关键字修饰的有数据.方法和类. 一.final 修饰数据 有final修饰的数据是用来告诉编译器一块数据是恒定不变的,有时数据恒定不变是很有用的,比如: 1.一个永不 ...

  8. Centos7下安装部署MXNET

    Centos下安装MXNET,参考官方文档http://mxnet.io/get_started/setup.html#prerequisites, 一.安装python的mxnet步骤如下: #!/ ...

  9. 如何在Win10上永久禁用Windows Defender Antivirus

    1.使用Windows键+ R键盘快捷键打开运行命令. 2.键入regedit,然后单击确定以打开注册表. 3.浏览以下路径: HKEY_LOCAL_MACHINE/SOFTWARE/Policies ...

  10. Ubuntu16.04 安装使用KiCad

    KiCad是一个带模拟器的电路设计软件, 官网 http://kicad-pcb.org/, 当前版本是4.0.7 安装 参考http://kicad-pcb.org/download/ubuntu/ ...