4

我在玩 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>&nbsp;</th>
            </table>
    </form>
</body>
</html>
4

1 回答 1

0

嗨,我已经准备好了这段代码,请测试一下,如果有任何遗漏,请告诉我

jsfiddler 演示运行应用程序可用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>&nbsp;</th>
            </table>


        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>
于 2012-10-29T12:28:16.890 回答