我在玩 JQuery 和 Table 时卡住了
用户单击按钮后,我想将文本框中的值从表单添加到表格
我的表单有 3 个组合框,其中 3 个是动态的(组合框的值从数据库加载)
当用户进入文本框并单击添加按钮时,来自组合框和文本框的值将附加到表单下的 div 中
你可以想象我的工作流程是这样的
==============================================
| Express | Standard | Premium
法国 | _ __ _ _ 10 _ __ _ __|_ _ __ _ ___ | 20
英格兰 | _ __ _ __ _ __ _ __ |_ _ __ 30__ |
葡萄牙 | _ ___ 50 _ __ _ __ |__ _ __ _ __ _ _ | 80
===============================================
当用户单击从组合框中选择国家并从组合框中选择模式(我的意思是标准 - 快递等...)然后在文本框中输入数字时,它将出现在表单下(我使用 div 并将表格附加到 div 或附加表格到表中),然后它可以获得值并将其添加到我想要的列中
示例首先单击我选择法国 - Express 和 20,第二次单击我选择 Endland 和 Standard 和 30,再次单击第三次我选择 France 和 Premium,值为 15
另一个问题 - 我有一个提供者组合框,这意味着 Express 有许多提供者,如 Express 1 - Express 2 - Express 3,等等。
当我再次选择 France 和 Express 但不同的提供商时,它将添加到 Express 列和 France Row 这个值
打字很难解释我想要什么
我将通过下面的图表一步一步地解释
首先点击:
===========================================
_ __ _ _ | 表达
法国 | 20
================================================== 第二点击
| Express_____ | Standard
法国 | _ ___ 20__ _ __ _ __ |
英格兰| _ __ _ __ _ __ _ __ _ ___ | 30
第三次点击
==================================================== ===
__| Express | Standard | Premium
法国 | _ __ _ __ 20 _ __|__ _ __ _ __ _ __ _ ___ | 15
英格兰| _ __ _ __ _ __ _ ___| _ __ _ ___30 _ __ _ |
==================================================== ===
另一个问题
_ _ __|__表达__| __ 标准 | 优质的
法国|快递1 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>