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 ...
随机推荐
- VMware 安装虚拟机安装MAC （OSX10_11）
一.简述前言: 1.本案例是基于 VMware Workstation Pro(专业版)12 上创建一个MAC操作系统(版本 :OSX10_11),下面的步骤基本上和安装其他类型的虚拟机没有什么区别. ...
- OpenCascade Draw Test Harness
OpenCascade Draw Test Harness eryar@163.com Abstract. Draw is a command interpreter based on Tcl/Tk ...
- 简单测试nginx1.90做TCP协议负载均衡的功能
最近工作中需要做TCP层面的负载均衡,以前网站用的反向代理nginx只支持应用层的负载均衡,对于TCP协议是无能为力的,需要使用LVS(linux虚拟服务器). LVS的特点是高性能和极复杂的配置.对 ...
- 教你如何塑造JavaScript牛逼形象
如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...
- 讲讲Android事件拦截机制
简介 什么是触摸事件?顾名思义,触摸事件就是捕获触摸屏幕后产生的事件.当点击一个按钮时,通常会产生两个或者三个事件--按钮按下,这是事件一,如果滑动几下,这是事件二,当手抬起,这是事件三.所以在And ...
- 大型网站提速关键技术(页面静态化,memcached,MySql优化)(三)
页面静态化的技术实现有两种方式 使用PHP自己的缓存机制 先说明一下OB缓存的机制. ob1.php 代码:说明的ob的各个用法->项目中 ☞ 如何打开ob缓存 ① 配置php.ini ...
- 大型网站提速关键技术(页面静态化,memcached,MySql优化)(一)
一:关键技术介绍: 衡量是否为大型网站的要素: A:PV值(page views 页面浏览量) 访问量大: 带来的问题:1:流量大 -->解决方案:增加带宽,优化程序(视频和图片较浪费带宽,尽量 ...
- maven 插件
一直没注意看maven执行过程中的打印日志,今天突然发现一段话,说编译以及resource未指定编码,默认gbk.于是,百度了设置编码的方式: <plugin> <groupId&g ...
- 在.net中读写config文件的各种方法
阅读目录 开始 config文件 - 自定义配置节点 config文件 - Property config文件 - Element config文件 - CDATA config文件 - Collec ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...