编程 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 相关文章推荐

javascript中的作用域scope介绍

Dec 28 Javascript

让textarea自动调整大小的js代码

Apr 12 Javascript

深入理解JS中的变量及作用域、undefined与null

Mar 04 Javascript

原生javascript实现图片弹窗交互效果

Jan 12 Javascript

Angularjs中UI Router的使用方法

May 14 Javascript

JSON 数据格式详解

Sep 13 Javascript

webpack vue项目开发环境局域网访问方法

Mar 20 Javascript

微信小程序仿RadioGroup改变样式的处理方案

Jul 13 Javascript

JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

Feb 18 Javascript

node(koa2) web应用模块介绍详解

Mar 29 Javascript

AntV F2和vue-cli构建移动端可视化视图过程详解

Oct 08 Javascript

Vue通过WebSocket建立长连接的实现代码

Nov 05 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="off" 设置不起作用Bug的解决方法

Mar 25 #Javascript

写了10年的Javascript也未必全了解的连续赋值运算

Mar 25 #Javascript

js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)

Mar 25 #Javascript

You might like

模板引擎Smarty深入浅出介绍

2006/12/06 PHP

php 无限级分类学习参考之对ecshop无限级分类的解析带详细注释

2010/03/23 PHP

php读取文件内容的方法汇总

2015/01/24 PHP

mac系统下为 php 添加 pcntl 扩展

2016/08/28 PHP

Yii2实现UploadedFile上传文件示例

2017/02/15 PHP

php之可变变量的实例详解

2017/09/12 PHP

JS 无限级 Select效果实现代码(json格式)

2011/08/30 Javascript

推荐40个简单的 jQuery 导航插件和教程(下篇)

2012/09/14 Javascript

在Javascript中声明时用"var"与不用"var"的区别

2013/04/15 Javascript

jquery 循环显示div的示例代码

2013/10/18 Javascript

使用jquery解析XML的方法

2014/09/05 Javascript

jquery得到iframe src属性值的方法

2014/09/25 Javascript

js实现点击左右按钮轮播图片效果实例

2015/01/29 Javascript

简介JavaScript中toTimeString()方法的使用

2015/06/12 Javascript

js实现表单检测及表单提示的方法

2015/08/14 Javascript

无法获取隐藏元素宽度和高度的解决方案

2017/03/07 Javascript

tab栏切换原理

2017/03/22 Javascript

关于webpack2和模块打包的新手指南（小结）

2017/08/07 Javascript

es6 symbol的实现方法示例

2019/04/02 Javascript

vue路由导航守卫和请求拦截以及基于node的token认证的方法

2019/04/07 Javascript

jQuery实现动态加载(按需加载)javascript文件的方法分析

2019/05/31 jQuery

Vue实现渲染数据后控制滚动条位置(推荐)

2019/12/09 Javascript

[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录

2014/10/23 DOTA

[01:44]Ti10举办地公布

2019/08/25 DOTA

Python实现网络端口转发和重定向的方法

2016/09/19 Python

Python性能提升之延迟初始化

2016/12/04 Python

你眼中的Python大牛应该都有这份书单

2017/10/31 Python

python如何实现一个刷网页小程序

2018/11/27 Python

如何在django里上传csv文件并进行入库处理的方法

2019/01/02 Python

python队列Queue的详解

2019/05/10 Python

html5 Canvas画图教程(9)—canvas中画出矩形和圆形

2013/01/09 HTML / CSS

美国百货齐全的精品网站，提供美式风格的产品：Overstock.com

2016/07/22 全球购物

美国奢侈品在线团购网站：Gilt City

2017/11/16 全球购物

销售员求职个人的自我评价

2014/02/19 职场文书

党支部考察意见范文

2015/06/02 职场文书

Python自动操作神器PyAutoGUI的使用教程

2022/06/16 Python