基于jquery的下拉框改变动态添加和删除表格实现代码


Posted in Javascript onSeptember 12, 2020

效果图:
基于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"> 

<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代码还有可优化的,儿童和成人下拉框改变天津添加的信息是一样的!可以只定义一个变量,两个函数共同使用!
Javascript 相关文章推荐
复制js对象方法(详解)
Jul 08 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
vue实现表单录入小案例
Sep 27 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 #Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 #Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 #Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 #Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 #Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 #Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 #Javascript
You might like
php与paypal整合方法
2010/11/28 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP培训要多少钱
2017/06/06 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
python django集成cas验证系统
2014/07/14 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python批量获取html内body内容的实例
2019/01/02 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Django ORM filter() 的运用详解
2020/05/14 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
发展部经理职责规定
2014/02/22 职场文书
企业标语大全
2014/07/01 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2014年收银工作总结
2014/11/13 职场文书
三下乡个人总结
2015/03/04 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
SQL Server中锁的用法
2022/05/20 SQL Server