基于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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
js实现分页功能
May 24 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
基于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检查日期函数checkdate用法实例
2015/03/19 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python中virtualenvwrapper安装与使用
2018/05/20 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
django基础学习之send_mail功能
2019/08/07 Python
python实现简单成绩录入系统
2019/09/19 Python
Pytorch之contiguous的用法
2019/12/31 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
超市采购员岗位职责
2014/02/01 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
详解Python类和对象内容
2021/06/22 Python
Golang流模式之grpc的四种数据流
2022/04/13 Golang
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs