JQuery と Table で遊んでいるときに行き詰まりました
ユーザーがボタンをクリックした後、フォームからテーブルにテキストボックスから値を追加したい
私のフォームには 3 つのコンボボックスがあり、そのうちの 3 つは動的です (コンボボックスの値はデータベースから読み込まれます)。
ユーザーがテキストボックスに入力して追加ボタンをクリックすると、コンボボックスとテキストボックスの値がフォームの下のdivに追加されます
私のワークフローはこのように想像できます
=============================================
| Express | Standard | Premium
フランス | フランス | _ _ _ _ 10 _ _ _ _| |__ _ __ _ ___ | 20
イギリス | イギリス | _ _ _ _ _ _ _ __ |__ _ __ 30__ |
ポルトガル | _ ___ 50 _ _ _ __ |__ _ __ _ __ _ _ | 80
==============================================
ユーザーがクリックしてコンボボックスから国を選択し、コンボボックスからモードを選択し（標準 - エクスプレスなどを意味します...）、テキストボックスに数値を入力すると、フォームの下に表示されます（divを使用し、テーブルをdivに追加するか、テーブルを追加しますテーブルに）、値を取得して、必要な列に追加できます
例 最初のクリックで France - Express と 20 を選択し、2 回目のクリックで Endland と Standard と 30 を選択し、3 回目のクリックで France と Premium を値 15 で選択します。
別の問題 - プロバイダー用のコンボボックスが 1 つあります。これは、Express には Express 1 - Express 2 - Express 3 などの多くのプロバイダーがあることを意味します。
France と Express をもう一度選択しますが、別のプロバイダーを選択すると、Express 列と France Row にこの値が追加されます
言いたいことを説明するのに一生懸命タイピングする
このように下図で順を追って説明します
最初のクリック:
==========================================
_ _ _ _ | 特急
フランス | フランス | 20
================================================ 秒クリック
| Express_____ | Standard
フランス | フランス | _ ___ 20__ _ __ _ __ |
イングランド| _ _ _ _ _ _ _ _ _ ___ | 30
3 回目のクリック
================================================== ===
__| Express | Standard | Premium
フランス | フランス | _ _ _ _ 20 _ _| |__ _ __ _ _ __ _ ___ | _ 15
イングランド| _ _ _ _ _ _ _ ___| | _ _ _ ___30 _ _ _ |
================================================== ===
別の問題
__ _ __| |__特急__| | __ 標準 | プレミアム
フランス|Express1 20 |__ _ __ _ ____ | プレミアム1 15、プレミアム3 20
イングランド| _ _ _ _ _ _ _ | スタンダード2 30 |
================================================== ===========
私のコード
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btAdd").click(function() {
var txtCost = $('#txtCost').val();
var ctryID = $('#CountryID').val();
var ctryName = $('#CountryID option:selected').text();
var modeID = $('#ModeID').val();
var modeName = $('#ModeID option:selected').text();
var ProviderID = $('#ProviderID').val();
var ProviderName = $('#ProviderID option:selected').text();
var HeaderTitle = $('#HeaderTitle').length;
var modenameID = $('#modeNameID'+modeName).text();
var CountryID = $('#Country'+ctryID).text();
if(HeaderTitle == 0){
$('#tblAppend').append(
'<tr id="HeaderTitle"><td></td><td id="modeNameID'+modeName+'">'+modeName+'</td><tr>'
);
}else{
if(modeName != modenameID){
$('#HeaderTitle').append(
'<td id="modeNameID'+modeName+'">'+modeName+'</td>'
);
}
}
if(CountryID != ctryName){
$('#tblAppend').append(
'<tr id="nameCTR'+ctryID+'"><td id="Country'+ctryID+'">'+ctryName+'</td></tr>'
);
}
if(CountryID != ctryName && modeName != modenameID){
$('#nameCTR'+ctryID).append(
'<td id="cost'+txtCost+'">'+txtCost+'</td>'
);
}
if(CountryID != ctryName && modeName == modenameID){
$('#nameCTR'+ctryID).append(
'<td id="cost'+txtCost+'">'+txtCost+'</td>'
);
}
if(CountryID == ctryName && modeName != modenameID){
$('#nameCTR'+ctryID).append(
'<td id="cost'+txtCost+'">'+txtCost+'</td>'
);
}
if (CountryID == ctryName && modeName == modenameID){
$('#cost'+txtCost).append(
'$'+txtCost
);
}
});
});
</script>
</head>
<body>
<form>
<table cellpadding="0" cellspacing="0">
<tr>
<td><input style="width:100px;" type="text" name="txtCost" id="txtCost" value=""/></td>
<td>
Country
<select id="CountryID">
<option value="1">France</option>
<option value="2">USA</option>
<option value="3">Poland</option>
<option value="4">Vietnam</option>
</select>
</td>
<td>
Mode
<select id="ModeID">
<option value="p1">Express</option>
<option value="p2">Standard</option>
<option value="P3">Premium</option>
</select>
</td>
<td>
Provider
<select id="ProviderID">
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
</select>
</td>
<td>
<input type="button" id="btAdd" name="btAdd" value="Add"/>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" id="tblAppend">
<th> </th>
</table>
</form>
</body>
</html>