Jqurey 기반 드롭다운 상자가 동적으로 테이블 추가 및 삭제 구현을 변경합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Jqurey 기반 드롭다운 상자가 동적으로 테이블 추가 및 삭제 구현을 변경합니다.

May 16, 2016 pm 06:09 PM

드롭다운 상자

렌더링:
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"> 
<머리> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<link href="reset.css" rel="stylesheet" type="text/css" /> 
<script 언어="javascript" type="text/javascript" src="jquery-1.3.js"></script> 
<style type="text/css"> 
*{ 
글꼴 크기:12px; 
} 
#dFlightContent1 { 
너비: 704px; 
높이:자동; 
테두리 하단: 1px 단색 #B0CAED; 
테두리 왼쪽: 1px 단색 #B0CAED; 
테두리 오른쪽: 1px 실선 #B0CAED; 
오버플로: 숨김; 
} 
.w_tt { 
글꼴 크기:14px; 
색상:#006699; 
여백:0px 4px; 
} 
.w_tit { 
너비:85px; 
텍스트 정렬:오른쪽; 
} 
.w_uinfo { 
너비:500px; 
여백:5px 20px 10px; 
} 
.w_uinfo 입력 { 
높이:18px; 
테두리:단색 1px #999999; 
} 
</style> 
<스크립트 언어="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'>乘客姓name：< /td><td colspan='2'><input type='text' name='userName' /></td></tr><tr height='30px'>&lt ;td class='w_tit'>证件号：</td><td><input type='text' name='papersNum' /></td><td class='w_tit' >证件类型：</td><td><이름 선택='paper' id='paper'<option value='1'>身份证</option><옵션 값 ='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'>乘客姓name：< /td><td colspan='2'><input type='text' name='userName' /></td></tr><tr height='30px'>&lt ;td class='w_tit'>证件号：</td><td><input type='text' name='papersNum' /></td><td class='w_tit' >证件类型：</td><td><이름 선택='paper' id='paper'<option value='1'>身份证</option><옵션 값 ='2'>출생일期</option><옵션 값='3'>其它</option></select></td></tr></table>&lt ;/td>"; 
children.remove(); 
for(var i = 1;i<=selValue;i ){ 
$("#child").append(addStr); 
} 
}
</script> 
</head> 
<본문> 
<div id="dFlightContent1" class="ct"> 
<table cellpadding="0px" cellpacing="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"> 
 
<tr height="30px"> 
<td class="w_tit">乘客姓name：</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><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 cellpadding="0px" cellpacing="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 cellpadding="0px" cellpacing="0px" border="0px" class="w_uinfo"> 
<tr height="40px"> 
<td class="w_tit">联系人姓name：</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> 
</테이블> 
</div> 
</body> 
</html> 
 
JavaScript는 혁신적인 방식을 가지고 있으며, 더 이상 사용할 수 없습니다. 같은 용도!