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的表格样式
03-17
NULL 博文链接：https://wdhagl-126-com.iteye.com/blog/579197
jQuery 表单事件和表单样式
qq_36194388的博客
07-29 237
表单有2个基本组成部分 表单域：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器端的方法。 表单元素：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。 单行文本框应用 文本框是表单域中最基本的元素，基于文本框的应用有很多。设置添加和失去焦点事件： $(funciton(){ $(":input").focus(func.
jquery form表单美化插件
04-05
NULL 博文链接：https://wsfei.iteye.com/blog/1522683
jquery 实现动态表单设计
weixin_34050519的博客
07-07 796
只是实现了前台页面的动态表单的设计，并未实现后台绑定数据到数据库等功能。技术使用到的为jquery和bootstrap。俗话说有图有真相，先说下具体效果如下： 点击添加一个面板容器： 容器添加成功： 实现的代码如下： <!DOCTYPE html> <html lang="en"> ...
jquery知识整理(七)---表单样式的获取和设置
Apple_Andy的博客
06-21 195
jquery修改css有2种方式 方法一:可以通过css 的方法 修改 css的属性值/属性值 css("属性") 获取属性值 css("属性","属性值") 设置css 的对应的属性样式值 $("#div1").css("background-color","red") .css("font-size","20px").css("color","green"); 或者 $("#div1").css({"color":"red","font-size":"20px","backgrou
jQuery前端UI框架表单样式代码
07-24
本资源“jQuery前端UI框架表单样式代码”是专门为开发者设计的一款工具，旨在帮助他们构建具有美观界面和高效交互的前端表单。这个框架允许开发者根据需求自定义表单元素的样式和参数，同时提供了丰富的特效选项，...
jquery表单Check样式
06-06
9. **无障碍性**：在优化表单样式的同时，也要注意保持良好的无障碍性（accessibility）。确保键盘用户也能正常操作这些元素，并使用`<label>`标签关联输入元素，提高可读性和可操作性。 10. **性能优化**：如果...
jQuery表单验证
10-29
在开始讨论jQuery表单验证之前，我们需要对jQuery有一个基本的理解。jQuery是由John Resig创建的一个JavaScript库，它的核心特性是提供了一种简单的方式来处理HTML文档、事件处理、动画和Ajax交互。通过使用jQuery，...
jQuery mobile表单样式
12-16
总结来说，jQuery Mobile 的表单样式和应用涉及到多个方面，包括但不限于表单组件的美化、主题定制、布局调整、事件处理以及与其他库的集成。利用这些工具和技巧，开发者可以构建出既美观又功能丰富的移动应用表单。
简单易懂的jQuery的form表单
weixin_44538083的博客
01-31 361
开发工具与关键技术：VS，jQuery 作者：陈梅 撰写时间：2019年1月31日 代码来源于老师改编 先来给页面布局看看 用jQuery弄form表单的代码非常简，不但代码少，知识点也少，可也十分重要的。 在form表单中，action属性的定义是，规定当提交表单时，向何处发送表单数据。 action属性 表单数据会提交到名为“chenmei的页面”，而chenmei可以为指定的网络连接或指定...
jquery 表单|文本框 漂亮弹框
12-15
http://blog.csdn.net/zou_hailin226/article/details/17334381 下载前可以先打开上面地址，看一下效果是否满意，上面我把部分效果图贴出来了，如果不满意就不要浪费积分了，如果满意就顶一下
form 表单 和 jQuery HTML / CSS 方法（$().html 类似的样式）
weixin_30355437的博客
04-16 224
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中form表单获取或失去焦点改变样式
The_upside_of_down的博客
07-24 1394
表单和表格都是HTML的重要组成部分，分别用于采集、提交用户输入的信息和显示列表数据。 在jQuery中，怎样实现表单获取和失去焦点时样式发生改变呢？ 当文本框获取焦点后它的样式需要改变，那此时我们可以用addClass()方法为其添加样式；当失去焦点时，我们可以用removeClass()为其移除样式。 jQuery代码： <script type="text/javascrip...
form表单样式案例
侯春强的博客
09-06 4904
代码： Title * { margin: 0; padding: 0; font-size: large; } .all { height: 600px; width: 500px;
手机网页form表单样式_如何在网站上使用jQuery Mobile设置表单样式
weixin_33357508的博客
01-12 77
How can I use jQuery Mobile to style my forms? None of the otherform styles look as cool.Will it cause any conflict with jQuery plugins (i.e. cycle, validate, etc.)or cause conflict for anything else ...
jquery form表单的美化插件
binglingnew的专栏
12-13 1276
form表单的美化插件，对input、button、radio、checkbox、select等进行美化，模拟原生操作，暴露出了单击、change事件、取值函数等，后台人员可以独立运用。
jQuery样式操作和效果操作
十三阿哥的博客
05-28 280
jQuery样式操作和效果操作
jQuery中form表单的基本使用
qq_36507046的博客
07-30 6051
本节内容主要介绍了jQuery中form表单的基本使用，同时附上了相应的的评论列表案例。
EasyUI Jquery 学习笔记 —— Form（表单）详细版
最新发布
cccloveforever的博客
04-09 1499
微调器（spinner）是创建其他微调器组件（比如：数值微调器 numberspinner、时间微调器 timespinner，等等）的基础组件。时间微调器（timespinner）是基于微调器（spinner）创建的。密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。与日期框（datebox）相似，日期时间框（datetimebox）允许用户选择要显示的带有指定格式的日期和时间的日期和时间。
利用formValidator插件实现jQuery表单验证
使用formValidator插件进行jQuery表单验证可以简化前端开发过程，提升用户体验。通过合理的代码结构和规则设置，可以有效防止无效或错误的数据提交，提高数据的准确性。开发者需要熟悉插件的API和可用功能，以创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值