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

jQuery生成asp.net服务器控件的代码

Feb 04 Javascript

jQuery 打造动态渐变按钮详细图文教程

Apr 25 Javascript

javascript中万恶的function实例分析

May 25 Javascript

js中函数调用的两种常用方法使用介绍

Jul 17 Javascript

JavaScript中校验银行卡号的实现代码

Dec 19 Javascript

在js代码拼接dom对象到页面上去的模板总结(必看)

Feb 14 Javascript

JavaScript实现精美个性导航栏筋斗云效果

Oct 29 Javascript

vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

Aug 25 Javascript

基于Vue 服务端Cookies删除的问题

Sep 21 Javascript

微信小程序实现点击卡片翻转效果

Sep 04 Javascript

详解JavaScript作用域、作用域链和闭包的用法

Sep 03 Javascript

React中的Context应用场景分析

Jun 11 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

sourcesafe管理phpproj文件的补充说明(downmoon)

2009/04/11 PHP

PHP strtotime函数详解

2009/12/18 PHP

php 中htmlentities导致中文无法查询问题

2018/09/10 PHP

PHP实现给定一列字符，生成指定长度的所有可能组合示例

2019/06/22 PHP

JavaScript CSS修改学习第二章样式

2010/02/19 Javascript

ff下JQuery无法监听input的keyup事件的解决方法

2013/12/12 Javascript

AngularJS中使用HTML5手机摄像头拍照

2016/02/22 Javascript

jQuery绑定事件的几种实现方式

2016/05/09 Javascript

node.js文件上传处理示例

2016/10/27 Javascript

详解Html a标签中href和onclick用法、区别、优先级别

2017/01/16 Javascript

JavaScript中的普通函数和箭头函数的区别和用法详解

2017/03/21 Javascript

详解angularJs模块ui-router之状态嵌套和视图嵌套

2017/04/28 Javascript

mongoose设置unique不生效问题的解决及如何移除unique的限制

2017/11/07 Javascript

页面点击小红心js实现代码

2018/05/26 Javascript

JS打印彩色菱形的实例代码

2018/08/15 Javascript

JavaScript使用闭包模仿块级作用域操作示例

2019/01/21 Javascript

详解JavaScript 浮点数运算的精度问题

2019/07/23 Javascript

Vue简单实现原理详解

2020/05/07 Javascript

[03:15]DOTA2-DPC中国联赛1月22日Recap集锦

2021/03/11 DOTA

浅谈Python中用datetime包进行对时间的一些操作

2016/06/23 Python

局域网内python socket实现windows与linux间的消息传送

2019/04/19 Python

基于opencv的selenium滑动验证码的实现

2020/07/24 Python

python 利用百度API识别图片文字（多线程版）

2020/12/14 Python

哪些情况下不应该使用索引

2015/07/20 面试题

中专生求职自荐信范文

2013/12/22 职场文书

承办会议欢迎词

2014/01/17 职场文书

教师教学评估方案

2014/05/09 职场文书

寻找最美家庭活动方案

2014/08/20 职场文书

机关作风建设工作总结

2014/10/23 职场文书

学校元旦晚会开场白

2014/12/14 职场文书

幼儿园教师工作总结2015

2015/04/02 职场文书

2015年学校工作总结范文

2015/04/20 职场文书

2015年村计划生育工作总结

2015/04/28 职场文书

盘点2020年适合农村地区创业的项目

2019/10/16 职场文书

HTML基础详解（下）

2021/10/16 HTML / CSS

使用Python通过企业微信应用给企业成员发消息

2022/04/18 Python