站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 基于Jqurey的下拉框改变动态添加和删除表格实现
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

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

来源: 易采站长站

效果图:

当下拉框改变的时候,添加一个成人填写信息或儿童填写信息!
代码如下:
<!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>”;

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -