基于Jqurey的下拉框改变动态添加和删除表格实现代码
效果图： 
当下拉框改变的时候，添加一个成人填写信息或儿童填写信息！
代码如下:
<!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>无标题文档</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="jquery-1.3.js"></script>
<style type="text/css">
*{
font-size:12px;
}
#dFlightContent1 {
width: 704px;
height:auto;
border-bottom: 1px solid #B0CAED;
border-left: 1px solid #B0CAED;
border-right: 1px solid #B0CAED;
overflow: hidden;
}
.w_tt {
font-size:14px;
color:#006699;
margin:0px 4px;
}
.w_tit {
width:85px;
text-align:right;
}
.w_uinfo {
width:500px;
margin:5px 20px 10px;
}
.w_uinfo input {
height:18px;
border:solid 1px #999999;
}
</style>
<script language="javascript">
//添加成人
function addAdult(){
var selAdult = $("#SelectAdult");
var tabtrCss = $(".tabtr");
var selValue = selAdult.val();
var addStr = "<tr class='tabtr'><td><table><tr height='30px'><td class='w_tit'>乘客姓名：</td><td colspan='2'><input type='text' name='userName' /></td></tr><tr height='30px'><td class='w_tit'>证件号：</td><td><input type='text' name='papersNum' /></td><td class='w_tit'>证件类型：</td><td><select name='paper' id='paper'><option value='1'>身份证</option><option value='2'>护照</option><option value='3'>军官证</option><option value='4'>其它</option></select></td></tr></table></td></tr>";
tabtrCss.remove();
for(var i=1;i<=selValue;i++){
$("#adult").append(addStr);
}
}
//添加儿童
function addChildren(){
var selChild = $("#SelectChildren");
var children = $(".children");
var selValue = selChild.val();
var addStr = "<tr class='children'><td><table><tr height='30px'><td class='w_tit'>乘客姓名：</td><td colspan='2'><input type='text' name='userName' /></td></tr><tr height='30px'><td class='w_tit'>证件号：</td><td><input type='text' name='papersNum' /></td><td class='w_tit'>证件类型：</td><td><select name='paper' id='paper'><option value='1'>身份证</option><option value='2'>出生日期</option><option value='3'>其它</option></select></td></tr></table></td></tr>";
children.remove();
for(var i = 1;i<=selValue;i++){
$("#child").append(addStr);
}
}
</script>
</head>
<body>
<div id="dFlightContent1" class="ct">
<table cellpadding="0px" cellspacing="0px" border="0px" class="w_uinfo" id="adult">
<tr height="40px">
<td colspan="4"><img src="06.png" alt="" /><b class="w_tt">成人</b>
<select name="SelectAdult" id="SelectAdult" onchange="addAdult()">
<option value="1">1人</option>
<option value="2">2人</option>
<option value="3">3人</option>
<option value="4">4人</option>
<option value="5">5人</option>
</select></td>
</tr>
<tr class="tabtr">
<td><table>
<tr height="30px">
<td class="w_tit">乘客姓名：</td>
<td colspan="2"><input type="text" name="userName" /></td>
</tr>
<tr height="30px">
<td class="w_tit">证件号：</td>
<td><input type="text" name="papersNum" /></td>
<td class="w_tit">证件类型：</td>
<td><select name="paper" id="paper">
<option value="1">身份证</option>
<option value="2">护照</option>
<option value="3">军官证</option>
<option value="4">其它</option>
</select></td>
</tr>
</table></td>
</tr>
</table>
<table cellpadding="0px" cellspacing="0px" border="0px" class="w_uinfo" id="child">
<tr height="40px">
<td colspan="4"><img src="06.png" alt="" /><b class="w_tt">儿童</b>
<select name="SelectChildren" id="SelectChildren" onchange="addChildren()">
<option value="0">0人</option>
<option value="1">1人</option>
<option value="2">2人</option>
</select></td>
</tr>
</table>
<table cellpadding="0px" cellspacing="0px" border="0px" class="w_uinfo">
<tr height="40px">
<td class="w_tit">联系人姓名：</td>
<td><input type="text" name="userName" /></td>
<td class="w_tit">联系方式：</td>
<td><input type="text" name="tel" /></td>
</tr>
<tr height="40px" align="center">
<td colspan="4"><img src="tijiao.jpg" alt="" /></td>
</tr>
</table>
</div>
</body>
</html>
JavaScript代码还有可优化的，儿童和成人下拉框改变天津添加的信息是一样的！可以只定义一个变量，两个函数共同使用！
相关推荐
-
jquery获得下拉框值的代码
获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select 选中的索引: $("#d
-
jquery multiSelect 多选下拉框
$("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText
-
基于jquery的checkbox下拉框插件代码
option_check.js代码 : 复制代码 代码如下: /***************************************** 调用方法为: Jselect($("#inputid"),{ bindid:'bindid', hoverclass:'hoverclass', optionsbind:function(){return hqhtml();} }); inputid为下拉框要绑定的文本框id bindid为点击弹出/收回下拉框的控件id hoverclas
-
jquery select下拉框操作的一些说明
复制代码 代码如下: //==========测试代码=============== <head runat="server"> <title>下拉框测试</title> <script type="text/javascript" src="/js/jquery/jquery-1.3.js"></script> <script type="text/javascript
-
Javascript select下拉框操作常用方法
复制代码 代码如下: function AddDropDownList(id,fatherCtl) { if(!document.getElementById(id)) { var ddl = document.createElement('select'); ddl.setAttribute("id",id); if(fatherCtl&&document.getElementById(fatherCtl)) document.getElementById(fathe
-
基于Jqurey的下拉框改变动态添加和删除表格实现代码
效果图: 当下拉框改变的时候,添加一个成人填写信息或儿童填写信息! 复制代码 代码如下: <!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"> &l
-
基于jquery的下拉框改变动态添加和删除表格实现代码
效果图: 当下拉框改变的时候,添加一个成人填写信息或儿童填写信息! 复制代码 代码如下: <!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"> &l
-
JS实现下拉框的动态添加(附效果)
效果展示: 页面初加载时: 选择车类型后: 选择车颜色后: JS实现下拉框的动态添加,网页代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www
-
基于jQuery实现下拉框
项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码. jQuery代码: 复制代码 代码如下: $(function(){ $('#add').click(function(){ var $options = $('#select1 option:selected'); $options.a
-
解决Jquery下拉框数据动态获取的问题
废话不多说,直接上源码: select.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+&q
-
原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
-
jQuery实现的简单动态添加、删除表格功能示例
本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;
-
JQuery动态添加和删除表格行的方法
本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi
-
基于Ajax实现下拉框联动显示数据
公司做项目的时候,需要用到下拉框联动显示数据的功能,索性利用Ajax来实现,看到时间比较充裕,就没去找demo自己去想方法写了.纯自己的想法,有些可能比较弱智,希望不要见笑. 页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style=&q
-
基于jquery实现下拉框美化特效
平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div里面隐藏着,方便后台开发人员对其进行操作. 效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <ti