在玩JQuery和Table
时遇到了困难我希望在用户点击按钮后将文本框中的值从表单添加到表中
我的表单有3个组合框，其中3个是dyanmic（来自数据库的组合框中的值）
当用户进入文本框，然后单击添加按钮时，组合框和文本框中的值将附加到表单下的div中
你可以想象我的工作流程
=============================================
| Express | Standard | Premium
法国| _ __ _ _ 10 _ __ _ __ | __ _ __ _ ___ | 20
英格兰| _ __ _ __ _ __ _ __ | < em> __ _ __ 30 __ < / strong> |
葡萄牙| _ ___ 50 _ __ _ __ | 的 的 __ _ __ _ __ _ _ | 80
============================================== < / p>
当用户点击从组合框中选择国家并从组合框中选择模式（我的意思是标准 - 快递等等）然后在文本框中输入数字，它将出现在表格下（我使用div并将表附加到div中）或者将表附加到表中），然后它可以获取值并将其添加到我想要的列中
示例第一次单击我选择法国 - 快速和20，第二次单击我选择Endland和标准和30，再次第三次单击我选择法国和高级值15
另一个问题 - 我有一个用于提供商的组合框，这意味着Express有许多提供商，如Express 1 - Express 2 - Express 3，依此类推。
当我再次选择France and Express但不同的提供者时，它会添加到Express列和France Row这个值
打字很难解释我想要什么
我将通过下面的图表逐步解释
首先点击：
==========================================
_ __ _ _ |快速
法国| 20
=============================================== == 再次点击
| Express_____ | Standard
法国| _ ___ 20 __ _ __ _ __ |
英国|的 _ __ _ __ _ __ _ __ _ ___ | 30
第三次点击
=============================================== ==
__| Express | Standard | Premium
法国| _ __ _ __ 20 _ __ < em> | __ _ __ _ __ _ __ _ < / em> ___ | 15
英国|的 _ __ _ __ _ __ _ ___ | _ __ _ ___ 30 < / EM> _ __ _ |
=============================================== ==
另一个问题
__ _ __ | __快递__ | __标准|高级
法国 | Express1 20 | __ _ __ < em> _ ____ | Premium1 15，Premium3 20
英国|的 _ __ _ __ _ __ _ | Standard2 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>
答案 0 :(得分：0)
您好我已准备好此代码请测试并告诉我是否有任何遗漏
jsfiddler demo running app available here
<html>
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"
type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay" style="height:10px">
</div>
<div id="menucontainer">
<ul id="menu">
<li><a href="/Home/About">Execute Sql</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
<div id="main">
<h2>Welcome to ASP.NET MVC!</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<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="mode' + ctryID + modeID + '"><div id="cost' + ctryID + ProviderID + modeID + '">' + ProviderName + ":" + txtCost + '</div></td>'
);
}
if (CountryID != ctryName && modeName == modenameID) {
$('#nameCTR' + ctryID).append(
'<td id="mode' + ctryID + modeID + '"><div id="cost' + ctryID + ProviderID + modeID + '">' + ProviderName + ":" + txtCost + '</div></td>'
);
}
if (CountryID == ctryName && modeName != modenameID) {
$('#nameCTR' + ctryID).append(
'<td id="mode' + ctryID + modeID + '"><div id="cost' + ctryID + ProviderID + modeID + '">' + ProviderName + ":" + txtCost + '</div></td>'
);
}
if (CountryID == ctryName && modeName == modenameID) {
//tr level chek if a mode is avila or not
{
var contain = false;
$('#nameCTR' + ctryID).find('td').each(function (id, val) {
if ($(this).attr('id') == ("mode" + ctryID + modeID)) {
contain = true;
}
});
if (contain == false) {
//add cell to country
$('#nameCTR' + ctryID).append(
'<td id="mode' + ctryID + modeID + '"><div id="cost' + ctryID + ProviderID + modeID + '">' + ProviderName + ":" + txtCost + '</div></td>'
);
}
}
//td lelvel entry of value depend on provider
{
if ($('#mode' + ctryID + modeID).find('div').text().indexOf(ProviderName) != -1) {
$('#cost' + ctryID + ProviderID + modeID).append(
'$' + txtCost
);
} else {
$('#mode' + ctryID + modeID).append(
'<div id="cost' + ctryID + ProviderID + modeID + '">' + ProviderName + ":" + txtCost + '</div>'
);
}
}
}
});
});
</script>
<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>
</div>
<div id="footer">
</div>
</div>
</body>
</html>