jquery表单样式

最新推荐文章于 2024-04-09 07:17:03 发布
最新推荐文章于 2024-04-09 07:17:03 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： ajax/jquery 文章标签： jquery function class javascript border table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuluo727282752/article/details/7396307
版权

使用jquery做的表单样式，有隔行变色、点击换色、选中换色等等

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>表单样式</title>
		<style type="text/css">
			tr.odd{background-color:#fef9ba;}
			tr.even{background-color:#edfefc;}
			tr.selected{background-color:#d7ced3;}
			tr.hover{background-color:#a54aff;}
		</style>
		
		
		<script type="text/javascript" language="JavaScript" src="../include/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="JavaScript">
			
			$(document).ready(function(){
				//第一种
				$("#tab_1 tr").each(function(index,domEle){					
					
					$("tr:odd").addClass("odd");
					$("tr:even").addClass("even")
					
					//单击改变颜色
					$(this).click(function(){												
						$(this).toggleClass("selected");
					});
								
				}).hover(function(){
				
					//设置新的样式
					$(this).addClass("hover");
			
				},function(){
				
					$(this).removeClass("hover");
									
				}
				);
				
				//第二种样式
				$("#tab_2 tr").each(function(index,domEle){					
					
					$("tr:odd").addClass("odd");
					$("tr:even").addClass("even")
					
					//单击改变颜色
					$("input[type=checkbox]").each(function(index,domEle){
					
					$(this).click(function(){
						
						$(this).parents("tr").toggleClass("selected");
						
					});			
				
				});	
								
				}).hover(function(){
				
					//设置新的样式
					$(this).addClass("hover");
			
				},function(){
				
					$(this).removeClass("hover");
									
				}
				);
				
							
				//第三种样式
				$("#tab_2 tr").each(function(index,domEle){					
					
					$("tr:odd").addClass("odd");
					$("tr:even").addClass("even")
					
					//单击改变颜色
					$("input[type=radio]").each(function(index,domEle){
					
					$(this).click(function(){
						
						$(this).parents("tr").toggleClass("selected");
						
					});				
				});
								
				}).hover(function(){
				
					//设置新的样式
					$(this).addClass("hover");
			
				},function(){
				
					$(this).removeClass("hover");
									
				}
				);
				
														
			});
			
		</script>
		
		
	</head>
	<body>
		单击改变颜色
		<table width="300" border="1" cellpadding="1" id="tab_1">
  <tr>
    <th>姓名</th>
    <th>手机</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<br><br><br>

选择checkbox后改变颜色
<table width="300" border="1" cellpadding="1" id="tab_2">
  <tr>
    <th>选择</th>
    <th>姓名</th>
    <th>手机</th>
    <th>邮箱</th>
  </tr>
  <tr>
   <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

<br><br><br>

选择radio后改变颜色
	<table width="300" border="1" cellpadding="1" id="tab_3">
  <tr>
    <th>选择</th>
    <th>姓名</th>
    <th>手机</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
	
		
	</body>
</html>


Sword_A
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery表单校验
weixin_42640196的博客
12-08 860
https://www.runoob.com/jquery/jquery-plugin-validate.html <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runo...
10 款简单精美的 jQuery/CSS3 表单
web开发
08-09 498
表单在网页中扮演着十分重要的作用，从用户登录注册到留言评论，都离不开表单。一个设计精美方便的表单，可以提高用户交互的质量。 下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单，希望对大家有所帮助。1、发光的HTML5表单 这是一款非常漂亮的HTML5登录表单，当表单获取焦点时，表单四周就会呈现出发光动画的效果，并不断地进行颜色渐变；当表单失去焦点时，停止发光。其中颜色渐变...
jQuery 表单事件和表单样式
qq_36194388的博客
07-29 236
表单有2个基本组成部分 表单域：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器端的方法。 表单元素：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。 单行文本框应用 文本框是表单域中最基本的元素，基于文本框的应用有很多。设置添加和失去焦点事件： $(funciton(){ $(":input").focus(func.
jQuery样式操作和效果操作
十三阿哥的博客
05-28 280
jQuery样式操作和效果操作
jQuery中form表单的基本使用
qq_36507046的博客
07-30 6018
本节内容主要介绍了jQuery中form表单的基本使用，同时附上了相应的的评论列表案例。
jQuery前端UI框架表单样式代码
07-24
本资源“jQuery前端UI框架表单样式代码”是专门为开发者设计的一款工具，旨在帮助他们构建具有美观界面和高效交互的前端表单。这个框架允许开发者根据需求自定义表单元素的样式和参数，同时提供了丰富的特效选项，...
jquery表单Check样式
06-06
9. **无障碍性**：在优化表单样式的同时，也要注意保持良好的无障碍性（accessibility）。确保键盘用户也能正常操作这些元素，并使用`<label>`标签关联输入元素，提高可读性和可操作性。 10. **性能优化**：如果...
jQuery mobile表单样式
12-16
总结来说，jQuery Mobile 的表单样式和应用涉及到多个方面，包括但不限于表单组件的美化、主题定制、布局调整、事件处理以及与其他库的集成。利用这些工具和技巧，开发者可以构建出既美观又功能丰富的移动应用表单。
jquery form表单美化插件
04-05
NULL 博文链接：https://wsfei.iteye.com/blog/1522683
基于jQuery的表格样式
03-17
NULL 博文链接：https://wdhagl-126-com.iteye.com/blog/579197
jquery 表单|文本框 漂亮弹框
12-15
http://blog.csdn.net/zou_hailin226/article/details/17334381 下载前可以先打开上面地址，看一下效果是否满意，上面我把部分效果图贴出来了，如果不满意就不要浪费积分了，如果满意就顶一下
jQuery表单验证
10-29
在开始讨论jQuery表单验证之前，我们需要对jQuery有一个基本的理解。jQuery是由John Resig创建的一个JavaScript库，它的核心特性是提供了一种简单的方式来处理HTML文档、事件处理、动画和Ajax交互。通过使用jQuery，...
EasyUI Jquery 学习笔记 —— Form（表单）详细版
最新发布
cccloveforever的博客
04-09 1489
微调器（spinner）是创建其他微调器组件（比如：数值微调器 numberspinner、时间微调器 timespinner，等等）的基础组件。时间微调器（timespinner）是基于微调器（spinner）创建的。密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。与日期框（datebox）相似，日期时间框（datetimebox）允许用户选择要显示的带有指定格式的日期和时间的日期和时间。
jQuery中form表单获取或失去焦点改变样式
The_upside_of_down的博客
07-24 1394
表单和表格都是HTML的重要组成部分，分别用于采集、提交用户输入的信息和显示列表数据。 在jQuery中，怎样实现表单获取和失去焦点时样式发生改变呢？ 当文本框获取焦点后它的样式需要改变，那此时我们可以用addClass()方法为其添加样式；当失去焦点时，我们可以用removeClass()为其移除样式。 jQuery代码： <script type="text/javascrip...
jquery 实现动态表单设计
weixin_34050519的博客
07-07 796
只是实现了前台页面的动态表单的设计，并未实现后台绑定数据到数据库等功能。技术使用到的为jquery和bootstrap。俗话说有图有真相，先说下具体效果如下： 点击添加一个面板容器： 容器添加成功： 实现的代码如下： <!DOCTYPE html> <html lang="en"> ...
form 表单 和 jQuery HTML / CSS 方法（$().html 类似的样式）
weixin_30355437的博客
04-16 223
1 有关链接 ：http://www.runoob.com/tags/tag-form.html 　　　　　　https://www.cnblogs.com/Jxwz/p/4509618.html 　　　　　　https://www.cnblogs.com/xiaoniuzai/p/6885199.html html：　 <!DOCTYPE html><h...
jQuery表单库jquery.form.js
热门推荐
云客的技术博客【云游天下 做客四方】
07-11 1万+
本主题是《云客drupal源码分析》的番外篇，在drupal系统中用于支持AJAX API，由于这是一个独立实用的库，因此专门用一个主题介绍 简介： jQuery表单库（jquery.form.js库）以jQuery为基础，用于处理表单AJAX提交，使得表单AJAX提交简单、容易，且能完整控制提交过程和处理结果，不需要任何特殊标签辅助，不影响原表单结构，只要使用该库就能使普通表单平滑升级...
ajax在线聊天室(一)
7F
03-08 7645
经过多天的努力，我们在老师的带领下做了一个聊天室，功能很多，请听我一一道来，分享大家学习。 首先，一个聊天室必须能够多人在线聊天，聊天的信息实时显示，今天我就分享如何在线聊天。 搭建一个聊天室的框架 在线聊天室 欢迎，进入聊天室 在线用户列表： 已屏蔽：取

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值