Jquery ベースのドロップダウン ボックスの変更により、テーブルの動的追加と削除の実装 code_jquery
May 16, 2016 pm 06:09 PM
ドロップダウンボックス
レンダリング:
ドロップダウン ボックスが変更されたら、情報を入力する大人を追加するか、情報を入力する子供を追加してください。
コードをコピー コードは次のとおりです:
<!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 language="javascript" type="text/javascript" src="jquery-1.3.js"></script>
<style type="text/css">
*{
font-size:12px;
}
#dFlightContent1 {
幅: 704px;
高さ:自動;
border-bottom: 1px ソリッド #B0CAED;
ボーダー左: 1px ソリッド #B0CAED;
border-right: 1px ソリッド #B0CAED;
オーバーフロー: 非表示;
}
.w_tt {
font-size:14px;
色:#006699;
マージン:0px 4px;
}
.w_tit {
width:85px;
text-align:right;
}
.w_uinfo {
幅:500px;
マージン:5px 20px 10px;
}
.w_uinfo input {
高さ: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'>乘客姓名:< /td><tdcolspan='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$("#アダルト").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><tdcolspan='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'>出生日期gt;gt;gt;gt;gt;
children.remove();
for(var i = 1;i$("#child").append(addStr);
}
}
</script>
</head>
<div id="dFlightContent1" class="ct">
<table cellpadding="0px" cellpacing="0px" border="0px" class="w_uinfo" id="アダルト">
<tr height="40px">
<tdcolspan="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">乘客姓名:</td>
<tdcolspan="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" cellpacing="0px" border="0px" class="w_uinfo" id="child">
<tr height="40px">
<tdcolspan="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" cellpacing="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">
<tdcolspan="4"><img src="tijiao.jpg" alt="" /></td>
</tr>
</table>
</body>
</html>
JavaScript コードもカスタマイズ可能、儿童と成人下拉框改天津追加の情報は一样的です!
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7297
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1206
29

