我在玩 JQuery 和 Table 时卡住了
我想在用户单击按钮后将表单中文本框的值添加到表中
我的表单有 3 个组合框，其中 3 个是动态的(组合框的值从数据库加载)
当用户进入文本框，并点击添加按钮时，来自组合框和文本框的值将附加到表单下的一个 div 中
你可以想象我的工作流程是这样的
=============================================
| Express | Standard | Premium
法国 |_____10___ ___| _________ | 20
英国 |____________|< em>_____30 __ |
葡萄牙 |____50______ |__________ | 80
==============================================
当用户单击从组合框中选择国家并从组合框中选择模式(我的意思是标准 - express 等...)然后在文本框中输入数字时，它会出现在表单下(我使用 div 并将表格附加到 div或将表附加到表中)，然后它可以获取值并将其添加到我想要的列中
示例，第一次点击我选择法国 - Express 和 20，第二次点击我选择 Endland 和 Standard 和 30，第三次点击我选择法国和 Premium，值为 15
另一个问题 - 我有一个供应商组合框，这意味着 Express 有许多供应商，如 Express 1 - Express 2 - Express 3，等等。
当我再次选择 France 和 Express 但不同的提供商时，它将添加到 Express 列和 France Row 这个值
打字太难解释我想要什么
我会像下面这样一步一步地用图来解释
第一次点击:
==========================================
_____ | express
法国 | 20
============================================= == 第二次点击
| Express_____ | Standard
法国 |____ 20 __ ______ |
英国| ________________ | 30
第三次点击
============================================= ======
__| Express | Standard | Premium
法国 | ______ 20 ___< em> |_______________ | 15
英格兰|_____________|_______ 30____|
============================================= ======
另一个问题
_____ |__Express__|__ 标准 |溢价
法国 |Express1 20 |_____< em>_____ | Premium1 15，Premium3 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>
最佳答案
您好，我已经准备好这段代码，请测试一下，如果有任何遗漏请告诉我
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>
关于jquery - 如何将 jquery 中的值附加到具有多个行和列的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12622655/