Question

我附上以下屏幕截图，希望有助于说明我的问题。

上面的屏幕截图显示了两行，每行都有自己的添加更多按钮，并带有加号（+）。

第一行有三个文本框，名字，姓氏和电子邮件。

第二行还有三个文本框，Source，Address和Income。

当您单击加号时，向第一行添加更多行，它可以正常工作，因为行是在默认行之后添加的。为第一行添加行的位置用黑色箭头表示。

第二行的第二个“添加更多”按钮（+）无法正常工作。它正在添加行，但不是将行添加到红色箭头所在的位置，而是将其添加到黑色箭头的位置，就像它被添加到第一行一样。

我知道我做错了但有人可以告诉我我做错了什么吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Dynamic Rows</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">  
    $(document).ready(function () {  
        $(document).on("click", ".classAdd", function () { //
            var rowCount = $('.data-contact-person').length + 1;  
            var contactdiv = '<tr class="data-contact-person">' +  
                '<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +  
                '<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +  
                '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +  
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">+</button>' +  
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">-</button></td>' +  
                '</tr>';  
            $('#maintable').append(contactdiv); // Adding these controls to Main table class  
        });
    });  
</script>
<script type="text/javascript">  
    $(document).ready(function () {  
    $(document).ready(function () {  
        $(document).on("click", ".classAdd", function () { //
            var rowCount = $('.data-contact-person2').length + 1;  
            var contactdiv = '<tr class="data-contact-person2">' +  
                '<td><input type="text" name="sourcename' + rowCount + '" class="form-control sourcename01" /></td>' +  
                '<td><input type="text" name="sourceaddress' + rowCount + '" class="form-control sourceaddress01" /></td>' +  
                '<td><input type="text" name="sourceincome' + rowCount + '" class="form-control sourceincome01" /></td>' +  
                '<td><button type="button" id="btnAdd2" class="btn btn-xs btn-primary classAdd">+</button>' +  
                '<button type="button" id="btnDelete" class="deleteContact2 btn btn btn-danger btn-xs">-</button></td>' +  
                '</tr>';  
            $('#maintable2').append(contactdiv); // Adding these controls to Main table class  
        })

        $(document).on("click", ".deleteContact2", function () {
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls 
        });        
    });  
</script>
</head>
<body>  
    <form id="form1" runat="server">  
        <div class="container">  
            <h2>Basic Table</h2>  
            <table class="table" id="maintable">  
                <thead>  
                    <tr>  
                        <th>Firstname</th>  
                        <th>Lastname</th>  
                        <th>Email</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <tr class="data-contact-person">  
                        <td>  
                            <input type="text" name="f-name" class="form-control f-name01" /></td>  
                        <td>  
                            <input type="text" name="l-name" class="form-control l-name01" /></td>  
                        <td>  
                            <input type="text" name="email" class="form-control email01" /></td>  
                        <td>  
                            <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">+</button>  
                        </td>  
                    </tr>  
                </tbody>  
            </table> 

             <table class="table" id="maintable2">  
                <thead>  
                    <tr>  
                        <th>Source </th>  
                        <th>Address </th>  
                        <th>Income</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <tr class="data-contact-person2">  
                        <td>  
                            <input type="text" name="sourcename" class="form-control sourcename01" /></td>  
                        <td>  
                            <input type="text" name="sourceaddress" class="form-control sourceaddress01" /></td>  
                        <td>  
                            <input type="text" name="sourceincome" class="form-control sourceincome01" /></td>  
                        <td>  
                            <button type="button" id="btnAdd2" class="btn btn-xs btn-primary classAdd">+</button>  
                        </td>  
                    </tr>  
                </tbody>  
            </table>   
            <button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm">Submit</button>  
        </div>  
    </form>  
</body>  
</html>

//最新代码

    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#btnAdd", function () { //
                var rowCount = $('.data-contact-person').length + 1;
                var contactdiv = '<tr class="data-contact-person">' +
                    '<td><input type="text" name="sourcename' + rowCount + '" class="form-control sourcename01" /></td>' +
                    '<td><input type="text" name="sourceaddress' + rowCount + '" class="form-control sourceaddress01" /></td>' +
                    '<td><input type="text" name="sourceincome' + rowCount + '" class="form-control sourceincome01" /></td>' +
                    '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                    '<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                    '</tr>';
                $('#maintable').append(contactdiv); // Adding these controls to Main table class
            });

            $(document).on("click", "#btnAdd2", function () { //
                var rowCount = $('.data-contact-person2').length + 1;
                var contactdiv = '<tr class="data-contact-person2">' +
                    '<td><input type="text" name="spousename' + rowCount + '" class="form-control spousename01" /></td>' +
                    '<td><input type="text" name="spouseaddress' + rowCount + '" class="form-control spouseaddress01" /></td>' +
                    '<td><input type="text" name="spouseincome' + rowCount + '" class="form-control spouseincome01" /></td>' +
                    '<td><button type="button" id="btnAdd2" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                    '<button type="button" id="btnDelete2" class="deleteContact btn btn btn-danger btn-xs">Add More</button></td>' +
                    '</tr>';
                $('#maintable2').append(contactdiv); // Adding these controls to Main table class
            });

        $(document).on("click", ".deleteContact", function () {
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls 
        });

        function getAllEmpData() {
            var data = [];
            $('tr.data-contact-person').each(function () {
                var sname = $(this).find('.sourcename01').val();
                var saddress = $(this).find('.sourceaddress01').val();
                var sincome = $(this).find('.sourceincome01').val();
                var spname = $(this).find('.spousename01').val();
                var spaddress = $(this).find('.spouseaddress01').val();
                var spincome = $(this).find('.spouseincome01').val();
                var alldata = {
                    'mySource': sname,
                    'mySAddress': saddress,
                    'mySIncome': sincome,
                    'mySpouse': spname,
                    'mySPAddress': spaddress,
                    'mySPIncome': spincome
                }
                data.push(alldata);
            });
            console.log(data);
            return data;
        }

        $("#btnSubmit").click(function () {
            var data = JSON.stringify(getAllEmpData());
            //console.log(data);
            $.ajax({
                url: 'closures.aspx/SaveData',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ 'empdata': data }),
                success: function () {
                    alert("Data Added Successfully");
                },
                error: function () {
                    alert("Error while inserting data");
                }
            });
        });
    });
</script>


    <WebMethod()> _
    Public Shared Function SaveData(empdata As String) As String
        Dim serializedData = JsonConvert.DeserializeObject(Of List(Of Employee))(empdata)
        Using con = New SqlConnection(Constr)
            If con.State = ConnectionState.Closed Then
                con.Open()
            End If
            For Each data As Employee In serializedData
                Using cmd = New SqlCommand("INSERT INTO SourceDetails(sourcename, sourceaddress, sourceincome, createDate) VALUES(@sname, @saddress,@sincome,@CreatedDate)")

                    cmd.CommandType = CommandType.Text
                    cmd.Parameters.AddWithValue("@sname", data.mySpouse)
                    cmd.Parameters.AddWithValue("@saddress", data.mySAddress)
                    cmd.Parameters.AddWithValue("@sincome", data.mySIncome)
                    cmd.Parameters.AddWithValue("@CreatedDate", DateTime.Now)
                    cmd.Connection = con
                    cmd.ExecuteNonQuery()
                End Using
            Next
            con.Close()
        End Using
        Return Nothing
    End Function

Answer 1

我看到你有第一个选择工作..很好！这基本上是我指的第二个选项..

https://jsfiddle.net/03u8z77y/

您可以添加某种类来更好地定位您的动态区域，这样您就不会意外地定位不需要的表格。

也许在下面..

<tbody>

成为

<tbody class="my-target">

更新（根据您的最新代码）

$(document).ready(function() {

    var $form1 = $('#form1');

    $form1.on("click", ".add-source", function() {
        var $this = $(this),
            $tbody = $this.closest('tbody'),
            rowCount = $tbody.find('.data-contact-person').length + 1,
            contactdiv = '<tr class="data-contact-person">' +
                '<td><input type="text" name="empdata[source][' + rowCount + '][name]" class="form-control" /></td>' +
                '<td><input type="text" name="empdata[source][' + rowCount + '][address]" class="form-control" /></td>' +
                '<td><input type="text" name="empdata[source][' + rowCount + '][income]" class="form-control" /></td>' +
                '<td><button type="button" class="btn btn-xs btn-primary add-source">Add More</button>' +
                '<button type="button" class="btn btn btn-danger btn-xs remove">Remove</button></td>' +
                '</tr>';
        $tbody.append(contactdiv);
    });

    $form1.on("click", ".add-spouse", function() {
        var $this = $(this),
            $tbody = $this.closest('tbody'),
            rowCount = $tbody.find('.data-contact-person').length + 1,
            contactdiv = '<tr class="data-contact-person">' +
                '<td><input type="text" name="empdata[spouse][' + rowCount + '][name]" class="form-control" /></td>' +
                '<td><input type="text" name="empdata[spouse][' + rowCount + '][address]" class="form-control" /></td>' +
                '<td><input type="text" name="empdata[spouse][' + rowCount + '][income]" class="form-control" /></td>' +
                '<td><button type="button" class="btn btn-xs btn-primary add-spouse">Add More</button>' +
                '<button type="button" class="btn btn btn-danger btn-xs remove">Remove</button></td>' +
                '</tr>';
        $tbody.append(contactdiv);
    });

    $form1.on("click", ".remove", function() {
        $(this).closest("tr").remove();
    });

    $form1.on('click', '#btnSubmit', function(){
        $.ajax({
            url: 'closures.aspx/SaveData',
            type: 'POST',
            dataType: 'json',
            data: $form1.serialize(),
            success: function() {
                alert("Data Added Successfully");
            },
            error: function() {
                alert("Error while inserting data");
            }
        });
    });

});

表格......

<form id="form1" runat="server">  
    <div class="container">  
        <h2>Basic Table</h2>  
        <table class="table">  
            <thead>  
                <tr>  
                    <th>Firstname</th>  
                    <th>Lastname</th>  
                    <th>Email</th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr class="data-contact-person">  
                    <td><input type="text" name="empdata[source][0][name]" class="form-control" /></td>  
                    <td><input type="text" name="empdata[source][0][address]" class="form-control" /></td>  
                    <td><input type="text" name="empdata[source][0][income]" class="form-control" /></td>  
                    <td><button type="button" class="btn btn-xs btn-primary add-source">Add More</button></td>  
                </tr>  
            </tbody>  
        </table> 

         <table class="table">  
            <thead>  
                <tr>  
                    <th>Source </th>  
                    <th>Address </th>  
                    <th>Income</th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr class="data-contact-person">  
                    <td><input type="text" name="empdata[spouse][0][name]" class="form-control" /></td>  
                    <td><input type="text" name="empdata[spouse][0][address]" class="form-control" /></td>  
                    <td><input type="text" name="empdata[spouse][0][income]" class="form-control" /></td>  
                    <td><button type="button" class="btn btn-xs btn-primary add-spouse">Add More</button></td>  
                </tr>  
            </tbody>  
        </table>   
        <button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm">Submit</button>  
    </div>  
</form>

现在我没有测试过，但让我知道它是如何运作的。

Answer 2

用这个替换头部。

<head id="Head1" runat="server">
    <meta charset="utf-8">
    <title>Dynamic Rows</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#btnAdd", function () { //
                var rowCount = $('.data-contact-person').length + 1;
                var contactdiv = '<tr class="data-contact-person">' +
                    '<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +
                    '<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +
                    '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +
                    '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">+</button>' +
                    '<button type="button" id="btnDelete1" class="deleteContact btn btn btn-danger btn-xs">-</button></td>' +
                    '</tr>';
                $('#maintable').append(contactdiv); // Adding these controls to Main table class
            });

            $(document).on("click", "#btnAdd2", function () { //
                var rowCount = $('.data-contact-person2').length + 1;
                var contactdiv = '<tr class="data-contact-person2">' +
                    '<td><input type="text" name="sourcename' + rowCount + '" class="form-control sourcename01" /></td>' +
                    '<td><input type="text" name="sourceaddress' + rowCount + '" class="form-control sourceaddress01" /></td>' +
                    '<td><input type="text" name="sourceincome' + rowCount + '" class="form-control sourceincome01" /></td>' +
                    '<td><button type="button" id="btnAdd2" class="btn btn-xs btn-primary classAdd">+</button>' +
                    '<button type="button" id="btnDelete2" class="deleteContact btn btn btn-danger btn-xs">-</button></td>' +
                    '</tr>';
                $('#maintable2').append(contactdiv); // Adding these controls to Main table class
            });

            $(document).on("click", ".deleteContact", function () {
                $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
            });
        });
    </script>
</head>

你需要学习一些关于基本html和其他的规则，比如：

不要在两个或多个元素中重复相同的ID。

您可以重复课程，但不能重复。

只使用一个$（文档）.ready（function（）{}）。

请注意，我改变了一些与此相关的事情。

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Dynamic Rows</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">  
    $(document).ready(function () {  
        $(document).on("click", ".classAdd", function () { //
            var rowCount = $('.data-contact-person').length + 1;  
            var contactdiv = '<tr class="data-contact-person">' +  
                '<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +  
                '<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +  
                '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +  
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">+</button>' +  
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">-</button></td>' +  
                '</tr>';  
            $('#maintable').append(contactdiv); // Adding these controls to Main table class  
        });
    });  
</script>
<script type="text/javascript">   
    $(document).ready(function () {  
        $(document).on("click", ".classAdd2", function () { //
            var rowCount = $('.data-contact-person2').length + 1;  
            var contactdiv = '<tr class="data-contact-person2">' +  
                '<td><input type="text" name="sourcename' + rowCount + '" class="form-control sourcename01" /></td>' +  
                '<td><input type="text" name="sourceaddress' + rowCount + '" class="form-control sourceaddress01" /></td>' +  
                '<td><input type="text" name="sourceincome' + rowCount + '" class="form-control sourceincome01" /></td>' +  
                '<td><button type="button" id="btnAdd2" class="btn btn-xs btn-primary classAdd2">+</button>' +  
                '<button type="button" id="btnDelete" class="deleteContact2 btn btn btn-danger btn-xs">-</button></td>' +  
                '</tr>';  
            $('#maintable2').append(contactdiv); // Adding these controls to Main table class  
        })

        $(document).on("click", ".deleteContact2", function () {
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls 
        });        
    });  
</script>
</head>
<body>  
    <form id="form1" runat="server">  
        <div class="container">  
            <h2>Basic Table</h2>  
            <table class="table" id="maintable">  
                <thead>  
                    <tr>  
                        <th>Firstname</th>  
                        <th>Lastname</th>  
                        <th>Email</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <tr class="data-contact-person">  
                        <td>  
                            <input type="text" name="f-name" class="form-control f-name01" /></td>  
                        <td>  
                            <input type="text" name="l-name" class="form-control l-name01" /></td>  
                        <td>  
                            <input type="text" name="email" class="form-control email01" /></td>  
                        <td>  
                            <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">+</button>  
                        </td>  
                    </tr>  
                </tbody>  
            </table> 

             <table class="table" id="maintable2">  
                <thead>  
                    <tr>  
                        <th>Source </th>  
                        <th>Address </th>  
                        <th>Income</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <tr class="data-contact-person2">  
                        <td>  
                            <input type="text" name="sourcename" class="form-control sourcename01" /></td>  
                        <td>  
                            <input type="text" name="sourceaddress" class="form-control sourceaddress01" /></td>  
                        <td>  
                            <input type="text" name="sourceincome" class="form-control sourceincome01" /></td>  
                        <td>  
                            <button type="button" id="btnAdd2" class="btn btn-xs btn-primary classAdd2">+</button>  
                        </td>  
                    </tr>  
                </tbody>  
            </table>   
            <button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm">Submit</button>  
        </div>  
    </form>  
</body>  
</html>

因为你在点击jquery代码上都使用了相同的类“.classAdd”。将另一个类更改为“.classAdd2”。并删除重复行$（document）.ready（function（）{。您可以在Web检查器中使用控制台来查看javascript错误。

添加更多按钮的两行不能正确添加新行

3 个答案: