JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
来源：互联网 发布：全国网络统考成绩查询 编辑：程序博客网 时间：2024/04/30 15:33
早上重构一个机票预定页面，页面有个增加和删除乘机人的功能，所以就用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>- JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
- Jquery教程:JS弹出窗口DIV层效果代码
- js禁用文本选择的代码
- js 文本滚动效果的实例代码
- 实现两个下拉选框内容不一致的JS代码
- js弹出层，效果代码
- jquery---如何获取select下拉框当前选择的文本
- Vue.js 仿 Select 下拉框
- js操作select下拉列表的一些通用代码
- treeview_ checkbox中选择的js代码 和 层移动代码
- JS+CSS和图片美化下拉列表选择框（select)
- 强大的JS，增加删除表格数据。
- js代码学习16--表格内容过滤
- js实现select下拉框选择
- 下拉列表左右选择(js代码)
- js/jq 获取select下拉框的文本值和value值
- js控制html下拉框select的选择
- 一个精简的JS DIV层tab切换代码
- Linux静态链接(库)、动态链接(库)、可执行文件加载相关问题
- Mysql索引优化
- LDD3之scull--从open系统调用到模块的scull_open执行流程分析
- 泛型及泛型接口
- 【经验教训】shell read echo中的转义字符
- JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
- 淘宝商城首页鼠标经过整个区域图片变暗变亮的JS特效代码
- latex基本的结构article
- HBase处理中文字符串
- C语言基础库（一）
- Android开发环境搭建(Eclipse4.2)
- C语言库函数（二）
- C++常用库函数atoi,itoa,strcpy,strcmp的实现
- Ubuntu 命令和系统安装分区介绍
