jQuery对表单、表格的操作及更多应用
<head>
<style type="text/css">
.even {
background-color: #fff38f;/*偶数行样式*/
}
.odd {
background-color: #dcdcdc;/*奇数行样式*/
}
.selected {
background-color: #ff4136;
}
table{
width: 50%;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>/*导入jquery包*/
<script type="text/javascript">
$(function() {
$("tbody>tr:odd").addClass("odd");//给奇数行添加样式
$("tbody>tr:even").addClass("even");//给偶数行添加样式
$("tbody>tr").click(function(){//绑定事件
if(!$(this).hasClass('selected')){//判断本行是否被选中
$(this).addClass('selected').find("input").attr("checked",true);//添加selected样式，然后找到多选框，把它的checked属性改为true
}else{
$(this).removeClass('selected').find("input").attr("checked",false);//同上相反
}
});
});
</script>
</head>
<body>
<table>
<thead>
<tr><td></td><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input type="checkbox"/></td><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input type="checkbox"/></td><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox"/></td><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td><input type="checkbox"/></td><td>赵六</td><td>男</td><td>浙江温州</td></tr>
<tr><td><input type="checkbox"/></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox"/></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
</body>
效果图：
jQuery对表单、表格的操作及更多应用的更多相关文章
- jQurey对表单表格的操作及更多应用（方法型）
- jQuery（6）——jQuery对表单、表格的操作及更多应用
jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...
- jQuery 对表单、表格的操作及更多应用-简略笔记
[jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...
- （十）jQuery对表单、表格的操作
一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...
- 第5章 jQuery对表单、表格的操作及更多应用
本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...
- jQuery对表单、表格的操作以及更多应用
表单和表格都是HTML的重要组成部分,分别用于采集.提交用户输入的信息和显示列表数据. 表单应用:一个表单有3个基本组成部分: ①表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器 ...
- jQuery对表单、表格的操作及更多应用（上：表单应用）
内容摘录自锋利的JQuery一书 一.表单应用 1 获取和失去焦点改变样式(P142) $(function(){ $(":input").focus(function(){ // ...
- jQuery对表单、表格的操作及更多应用（中：表格应用）
内容摘录自锋利的JQuery一书 二.表格应用 1 表格隔行变色(:odd和:even选择器 P157) $(function(){ $("tr:odd").addClass(&q ...
- jQuery对表单、表格的操作及更多应用（下：其他应用）
内容摘录自锋利的JQuery一书 三.其他应用 1 网页字体大小控制(P164) <span class="bigger">放大</span> <s ...
随机推荐
- HTML5的实用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ffffff } p.p2 ...
- Unity 文件读取
存储: 在程序发布后文件的存放有两种,第一种是打包到Uniyt的资源包中(*.unity3D),第二种就是把文件存放在一个特殊的目录如:StreamingAssets,这个目录的东西Unity不会打包 ...
- 简单java在线测评程序
简单java程序在线测评程序 一．前言 大家过年好!今年的第一篇博客啊!家里没有网,到处蹭无线!日子过得真纠结!因为毕设的需求,简单写了一个java程序在线测评程序,当然也可以在本地测试. 二．思路 ...
- MVC解决Json DataGrid返回的日期格式是/Date(20130450000365)
实际上是Json格式化问题,我们应该在返回json的时候进行格式化,我们需要重写系统的JsonResult类 using System; using System.Collections.Generi ...
- 【原创】开源Math.NET基础数学类库使用(06)直接求解线性方程组
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- NFS Volume Provider（Part I） - 每天5分钟玩转 OpenStack（62）
cinder-volume 支持多种 volume provider,前面我们一直使用的是默认的 LVM,本节我们将增加 NFS volume provider. 虽然 NFS 更多地应用在实验或小规 ...
- 小菜学习设计模式（二）—单例（Singleton）模式
前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...
- Xen之初体验：HA（额外附加）
高可用性,虽说不是在这个版本就开始免费的,但是连续的体验一下会更加完整些. Figure 9在资源池的位置上右击选择High Availability,进入到配置HA的窗口中 Figure 10在资源 ...
- C#的DataTable操作方法
1.将泛型集合类转换成DataTable(表中无数据时使用): public static DataTable NullListToDataTable(IList list) { var result ...
- Kooboo CMS 无聊随笔 （1）
因为公司的框架不开源,但是自己一直都有研究框架的兴趣,所以拿了一个开源的框架过来,而这个开源的框架就是Kooboo CMS.首先我无法用言语来形容我对这个CMS的赞美之词了,总之大家知道一点,这个CM ...