table操作：边框-斑马线-多表头-焦点高亮-自动求和
一、操作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操作：边框-斑马线-多表头-焦点高亮-自动求和的更多相关文章
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- QT窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透
qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透 窗口置顶qt 里是 setWindowFlags(Qt::WindowStaysOnTopHint)kde 里 ...
- 5种做法实现table表格中的斜线表头效果
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...
- Oracle索引梳理系列（十）- 直方图使用技巧及analyze table操作对直方图统计的影响（谨慎使用）
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...
- table 操作
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- css如何让表格table的边框为1像素呢
在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...
- MySQL DROP TABLE操作以及 DROP 大表时的注意事项【转】
删表 DROP TABLE Syntax DROP [TEMPORARY] TABLE [IF EXISTS] tbl_name [, tbl_name] ... [RESTRICT | CASCAD ...
- mysql批量进行optimize table操作
数据库运行一段时间后,有可能会有磁盘磁片产生,此时我们需要进行optimize table操作 # 获取需要optimize的表:如下为获取总大小小于80G的表进行操作:mysql -utroot - ...
- Html table 细边框
Html table 细边框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
随机推荐
- 模拟表格 inline-block等高布局
表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构.但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制.所以我们希望有表格的展示效果,但 ...
- Love Hotels and Unicode[转]
原文地址:http://www.reigndesign.com/blog/love-hotels-and-unicode/ 讲得挺通俗的一篇文章 On Sunday 28 October I atte ...
- wcf系列学习5天速成——第三天 事务的使用
今天是速成的第三天,再分享一下WCF中比较常用的一种技术,也就是”事务“. 在B2B的项目中,一般用户注册后,就有一个属于自己的店铺,此时,我们就要插入两张表, User和Shop表. 当然,要么插入 ...
- C语言中头文件<stdio.h>中的#ifndef _STDIO_H_
先了解这里的相关知识:http://www.cnblogs.com/stemon/p/4000468.html 头文件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都in ...
- js 删除本身节点元素
var theParent = document.getElementById("bq_ly"); theParent.parentNode.removeChild(thePa ...
- Cortex-M3学习日志（二）-- 按键实验
有输出总会有输入,今天测试一下按键的功能,第一节已经说过了与GPIO端口相关的寄存器,这里不在重复,想要从端口读取数据,首先把FIODIR这个寄存器设置为输入,再从FIOPIN寄存器读取数据就可以了, ...
- 关于调用约定(cdecl、fastcall、、thiscall) 的一点知识（用汇编来解释）good
函数调用规范 当高级语言函数被编译成机器码时,有一个问题就必须解决:因为CPU没有办法知道一个函数调用需要多少个.什么样的参数.即计算机不知道怎么给这个函数传递参数,传递参数的工作必须由函数调用者 ...
- XDocument读取xml的所有元素以及XPath语法
原文 http://www.cnblogs.com/xxyishutong/p/3326375.html <?xml version="1.0" encoding=&quo ...
- js获取手机重力感应api
<html> <head> <title>DeviceOrientationEvent</title> <meta charset="U ...
- 前端web应用组件化（一） 徐飞
https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...