您的位置: 首页  >  IT文章  >  JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性上拉框选择效果JS代码

JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性上拉框选择效果JS代码

分类: IT文章 • 2024-05-29 19:41:01
JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码

早上重构一个机票预定页面，页面有个增加和删除乘机人的功能，所以就用JQuery 的 .remove() 属性和.append() 属性写了一个有增加、删除div层文本内容效果的JS代码，具体可运行下面的代码进行演示查看，这个代码总共有两个JS效果：

1、 增加、删除div层文本内容

2、下拉框选择效果

在线演示：http://mj.588cy.com/jquery/24.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
em{ font-style: normal; }
* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}
body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}
a{ text-decoration:none;}
.top{ width:970px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}
.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}
.logo a{ color:#666666;}
.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}
.denglu a{ color:#666666; margin:0px 10px;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}

.box{ width:950px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9; padding:30px 10px;}
.ck{ width:950px; height:auto; padding-top:10px;}
.ck_list{ width:950px; height:22px; padding:10px 0px; color:#555555; font-size:12px; border-bottom:1px solid #dddddd;}
.ck_list input{ color:#555555; overflow:hidden;}
.ck_list_xm{ height:22px; display:block; padding:0px 7px 0px 14px; line-height:22px; float:left;}
.ck_list_xm em{ color:#ff005b; font-family:"宋体"; margin-left:10px;}
.ck_input_a{ width:100px; height:20px; float:left; border:1px solid #bababa; padding:0px 2px; _height:17px; _padding:3px 2px 0px 2px; margin-right:4px;}
.ck_list_lb,.span_fd{width:98px;}
.ck_list_zj,.span_fd_zj{ width:68px;}
.ck_list_bx,.span_fd_bx{ width:58px;}
.ck_list_fd{ height:20px; border:1px solid #bababa; display:block; float:left; background:url(http://mj.588cy.com/img/bg_mj.png) no-repeat right -620px;}
.touming_jq{ position:relative; z-index:1;}
.ck_input_b{width:70px;}
.ck_input_c{width:40px;}
.ck_input_e{width:30px;}
.ck_input_b,.ck_input_c,.ck_input_e{ float:left; border:0px; height:20px;padding:0px 3px; _height:17px; _padding:3px 3px 0px 3px; cursor:pointer;}
.span_lb{ width:22px; height:20px; float:left; cursor:pointer;}
.span_fd,.span_fd_zj,.span_fd_bx{ height:auto; border-width:0px 1px 1px 1px; border-style:solid; border-color:#bababa; position:absolute; left:-1px; top:21px; z-index:999; display:none; background-color:#FFFFFF;}
.span_fd span{width:92px;}
.span_fd_zj span{ width:62px;}
.span_fd_bx span{ width:52px;}
.span_fd span,.span_fd_zj span,.span_fd_bx span{height:20px; line-height:20px; padding:2px 3px; display:block; cursor:pointer;}
.ck_input_d{ width:165px; height:20px; float:left; border:1px solid #bababa; padding:0px 2px; _height:17px; _padding:3px 2px 0px 2px; margin:0px 36px 0px 6px;}
.shanchu{ width:14px; height:14px; margin:3px 17px; display:block; float:right; background:url(http://mj.588cy.com/img/bg_mj.png) no-repeat 0px -661px; cursor:pointer;}

.zj{ width:922px; height:22px; padding:10px 14px; font-size:12px;}
.zj_an{ display:block; width:83px; height:22px; float:left; background:url(http://mj.588cy.com/img/bg_mj.png) no-repeat 0px -695px; cursor:pointer;}
.zj_ts{display:block; height:22px; float:left; color:#ff075b; line-height:22px; padding-left:10px;}
.zj_input_a{float:right; margin:5px 5px 0px 0px; _margin:1px 1px 0px 0px;}
.zj_bc{display:block; height:22px; float:right; line-height:22px; color:#555555;}
</style>
<script type="text/javascript" src="http://mj.588cy.com/img/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
	  $(document).ready(function(){	    			
			$(".jq_ck,.jq_val").click(function(){
				$(this).siblings(".jq_lb").slideToggle(100);
				$(".ck_list_fd").removeClass("touming_jq");
				$(this).parent(".ck_list_fd").addClass("touming_jq")
			});
			
			$("*").click(function(){
				$(".jq_lb").hide();
			});
			
			$(".jq_lb span").hover(function(){
			$(this).css({"background-color":"#0066CC","color":"#FFFFFF"})
			},function(){
			$(this).css({"background-color":"#ffffff","color":"#555555"})
			});
			
			$(".jq_lb span").click(function(){
			 $(this).parent().siblings(".jq_val").val($(this).html())
			});

			$(".shanchu").click(function(){
			  if ($(".ck_list").size() > 1) { 
              $(this).parent().remove(); 
                } else {
                 $(".zj_ts").html("一个订单至少保留1位乘机人"); 
                } 
			});
			
			$(".zj_an").click(function(){
			 $(".ck").append($(".ck_list:first").clone(true));
			 $(".zj_ts").html("");
			});			
	  });
    </script>
</head>

<body>
<div class="top">
<div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div>
<div class="denglu"><a href="#">登录</a><a href="#">注册</a></div>
<div class="clear"></div>
</div>

<div class="box">
<div class="ck">
<div class="ck_list">
<span class="ck_list_xm">姓名<em>*</em></span>
<input name="" type="text" class="ck_input_a" />
<span class="ck_list_lb ck_list_fd">
<input name="" type="text" class="ck_input_b jq_val" value="成人(>12岁)" onmousedown="return false" />
<div class="span_lb jq_ck"></div>
<div class="clear"></div>
<div class="span_fd jq_lb"><span>成人(＞12岁)</span><span>儿童(2-12岁)</span></div>
</span>

<span class="ck_list_xm">证件号码<em>*</em></span>
<span class="ck_list_zj ck_list_fd">
<input name="" type="text" class="ck_input_c jq_val" value="身份证" onmousedown="return false" />
<div class="span_lb jq_ck"></div>
<div class="clear"></div>
<div class="span_fd_zj jq_lb"><span>身份证</span><span>护照</span><span>其它</span></div>
</span>
<input name="" type="text" class="ck_input_d" />

<span class="ck_list_xm">保险</span>
<span class="ck_list_bx ck_list_fd">
<input name="" type="text" class="ck_input_e jq_val" value="0份" onmousedown="return false" />
<div class="span_lb jq_ck"></div>
<div class="clear"></div>
<div class="span_fd_bx jq_lb"><span>0份</span><span>1份</span><span>2份</span></div>
</span>
<span class="ck_list_xm">￥20/份</span>
<span class="shanchu"></span>
<span class="clear"></span></div>

<div class="ck_list">
<span class="ck_list_xm">姓名<em>*</em></span>
<input name="" type="text" class="ck_input_a" />
<span class="ck_list_lb ck_list_fd">
<input name="" type="text" class="ck_input_b jq_val" value="成人(>12岁)" onmousedown="return false" />
<div class="span_lb jq_ck"></div>
<div class="clear"></div>
<div class="span_fd jq_lb"><span>成人(＞12岁)</span><span>儿童(2-12岁)</span></div>
</span>

<span class="ck_list_xm">证件号码<em>*</em></span>
<span class="ck_list_zj ck_list_fd">
<input name="" type="text" class="ck_input_c jq_val" value="身份证" onmousedown="return false" />
<div class="span_lb jq_ck"></div>
<div class="clear"></div>
<div class="span_fd_zj jq_lb"><span>身份证</span><span>护照</span><span>其它</span></div>
</span>
<input name="" type="text" class="ck_input_d" />

<span class="ck_list_xm">保险</span>
<span class="ck_list_bx ck_list_fd">
<input name="" type="text" class="ck_input_e jq_val" value="0份" onmousedown="return false" />
<div class="span_lb jq_ck"></div>
<div class="clear"></div>
<div class="span_fd_bx jq_lb"><span>0份</span><span>1份</span><span>2份</span></div>
</span>
<span class="ck_list_xm">￥20/份</span>
<span class="shanchu"></span>
<span class="clear"></span></div>
</div>

<div class="zj">
<span class="zj_an"></span>
<span class="zj_ts"></span>
<span class="zj_bc">保存至常用联系人</span>
<input name="" type="checkbox" value="" class="zj_input_a" />
<span class="clear"></span>
</div>
</div>
</body>
</html>


2楼Little_Stars昨天 09:46
简洁完美，谢谢楼主，收藏了~~
1楼ycagri前天 10:00
怎么取值？

相关推荐