ASP.NET - Jquery动态添加文本框和下拉列表

Question

我需要能够在网页上提供一个有两个下拉列表和一个文本框的表格，用户应该能够添加他们想要的任何数量的行。我需要使用jquery来解决这个问题，这样我就可以避免回发。这可以在Jquery中实现吗?如果可能的话，我正在寻找一些类似指针的示例

Answer 1

这应该会让你开始..。另存为.html文件作为示例

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        function createTextbox(){
            return "<input type='text' />"
        }
        function createDropDown(){
            return "<select><option>One</option><option>Two</option><option>Three</option></select>"
        }
        function createRow(){
            return "<tr><td>" + createTextbox() + "</td><td>" + createDropDown() + "</td><td>" + createDropDown() + "</td></tr>";
        }
        function getValuesForPostback(){
            //format as XML, JSON, or Whatever
            var ToReturn = "<items>"; 
            $('#sampleTable tr').each(function(){
                ToReturn += "<item>";
                //Get the textbox value
                ToReturn += "<text>" + $(this).find('input[type=text]').val() + "</text>";

                //Get the select values
                $(this).find('select option:selected').each(function(){
                    ToReturn += "<select>" + $(this).val() + "</select>";
                });
                ToReturn += "</item>";
            });
            ToReturn += "</items>";
            return ToReturn;
        }
        function submitValues()
        {
            alert(getValuesForPostback());
            //NOW: Just ajax or post back this value to the server and parse for your data.
        }
        $(document).ready(function(){
            $('#sampleTable').append(createRow());

            $('#btnAdd').click(function(){
                $('#sampleTable').append(createRow());
            });

            $('#btnSubmit').click(function(){
                submitValues();
            });
        });
    </script>
  </head>
  <body>
    <table id="sampleTable">

    </table>
    <button id="btnAdd">Add</button>
    <button id="btnSubmit">Submit</button>
  </body>
</html>