JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性上拉框选择效果JS代码
日期：2014-05-16 浏览次数：20357 次
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:poin
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
