基于jquery的下拉框改變動(dòng)態(tài)添加和刪除表格實(shí)現(xiàn)代碼
更新時(shí)間:2020年09月12日 14:29:08 投稿:mdxy-dxy
以前很少用jquery,現(xiàn)在工作需要,用上了,感覺真的很方便!不用再像以前那樣寫那么多多余的Js了!看來得在jquery上花點(diǎn)功夫呢!
效果圖:
當(dāng)下拉框改變的時(shí)候,添加一個(gè)成人填寫信息或兒童填寫信息!
復(fù)制代碼 代碼如下:
<!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>無標(biāo)題文檔</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'>證件號(hào):</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'>護(hù)照</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'>證件號(hào):</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">證件號(hào):</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">護(hù)照</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">聯(lián)系人姓名:</td>
<td><input type="text" name="userName" /></td>
<td class="w_tit">聯(lián)系方式:</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代碼還有可優(yōu)化的,兒童和成人下拉框改變天津添加的信息是一樣的!可以只定義一個(gè)變量,兩個(gè)函數(shù)共同使用!
相關(guān)文章
jQuery實(shí)現(xiàn)指定內(nèi)容滾動(dòng)同時(shí)左側(cè)或其它地方不滾動(dòng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定內(nèi)容滾動(dòng)同時(shí)左側(cè)或其它地方不滾動(dòng)的方法,可實(shí)現(xiàn)頁面滾動(dòng)的時(shí)候指定位置懸浮固定的效果,涉及jquery針對(duì)頁面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-08-08jquery實(shí)現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值
本文給大家介紹的是一段十分實(shí)用的代碼,使用jQuery實(shí)現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值,在制作項(xiàng)目的時(shí)候經(jīng)常需要用到此功能,這里分享給大家。2015-02-02jquery 頁面滾動(dòng)到指定DIV實(shí)現(xiàn)代碼
頁面滾動(dòng)到指定DIV的方法有很多,在本文將為大家介紹下jquery是如何實(shí)現(xiàn)的2013-09-09JQuery入門——事件切換之toggle()方法應(yīng)用介紹
在toggle()方法中,可以依次調(diào)用N個(gè)指定的函數(shù),直到最后一個(gè)函數(shù),然后重復(fù)對(duì)這個(gè)函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時(shí)候相當(dāng)?shù)姆奖?接下來將會(huì)詳細(xì)介紹toggle()方法的使用,感興趣的你可不要錯(cuò)過了啊2013-02-02jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-06-06