首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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代码还有可优化的，儿童和成人下拉框改变天津添加的信息是一样的！可以只定义一个变量，两个函数共同使用！

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

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
javascript prototype 原型链
Mar 12 Javascript
浅说js变量
May 25 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
javascript制作2048游戏
Mar 30 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
jquery css实现流程进度条
Mar 26 jQuery
基于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
canvas(2) SQL注入(2) flex(1) #{}(1) flex-shrink(1) 代理(2) GNN(1) 选择器(1) 外键(1) 图片模糊(1)
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
教师实习的自我鉴定
2013/10/26 职场文书
暑假家长评语大全
2014/04/17 职场文书
合伙经营协议书范本
2014/04/18 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
祝福语集锦：给满月宝宝的祝福语
2019/11/20 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript