jquery如何在编辑后更新数据表行？

Question

当我在编辑模式中编辑某些字段时，我正在尝试更新我的datatable。下面是我的modal、add row 和btnSubmit 函数，用于获取已编辑的字段。

 <div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Close</h4>
            </div>
            <div class="modal-body">
                <p>
                    <label for="name">Name:</label>
                    <input type="text" id="name1" placeholder="Name">
                </p>
                <p>
                    <label for="name">E-mail#:</label>
                    <input type="email" class="input-sm" id="email1" placeholder="Email">
                </p>
                <p>
                    <label for="name">Contact#:</label>
                    <input type="text" class="input-sm" id="cno1" placeholder="Contact">
                </p>
                <p>
                    <label for="name">Date Of Birth:</label>
                    <input type="date" class="input-sm" id="dob1" placeholder="DOB">
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btnsubmit" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

$('.add-row').on('click', function() {
            name = $("#name").val();
            email = $("#email").val();
            cno = $("#cno").val();
            bdy = $("#bday").val();
            
            t.row.add([
                name,
                email,
                cno,
                bdy,
                "<button class ='btn btn-danger del'>Delete</button>" + " " + "<button class='btn btn-warning upd'>Edit</button>"





            ]).draw(false);
            $("#name").val('');
            $("#email").val('');
            $("#cno").val('');
            $("#bday").val('');

        });
        

$("#btnsubmit").click(function () {
                var new_name = $("#name1").val();
                var new_email = $("email1").val();
                var new_cno = $("#cno1").val();
                var new_dob = $("#dob1").val();
                
            
                $("#myModal").modal("hide");
            })

更新 1

我试着做一个数组然后画出来。

//save change button click evnet
         $("#btnsubmit").click(function () {
            var table = $('#example').DataTable();
            var tableRow = $(this).parents('tr');
            
                var new_name = $("#name1").val();
                var new_email = $("email1").val();
                var new_cno = $("#cno1").val();
                var new_dob = $("#dob1").val();
                var rData = [
                    
                        new_name,
                        new_email,
                        new_cno,
                        new_dob,
                        
                    
                ];
                table
                .row(tableRow)
                .data(rData)
                .draw();
                $("#myModal").modal("hide");
            });

现在我遇到了错误

> datatable.js:430 Uncaught TypeError: Cannot set property '_aData' of undefined
  at D.<anonymous> (datatable.js:430)
    at D.data (datatable.js:371)
    at HTMLButtonElement.<anonymous> (form1_datatable.html:194)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.v.handle (jquery.min.js:2)

更新 2

所以在做了一些努力之后，我终于能够更新该行了。但现在我遇到了一个问题。每当我尝试更新它时，它总是更新第一行。下面是我保存按钮的代码

//save change button click evnet
         $("#btnsubmit").on('click',function () {
            var table = $('#example').DataTable();
            var tableRow = $(this).closest('tr');
            
                var new_name = $("#name1").val();
                var new_email = $("#email1").val();
                var new_cno = $("#cno1").val();
                var new_dob = $("#dob1").val();

                var rData = [
                    
                        new_name,
                        new_email,
                        new_cno,
                        new_dob,
                        "<button class ='btn btn-danger del'>Delete</button>" + " " + "<button class='btn btn-warning upd'>Edit</button>"
                    
                ];
                console.log(tableRow);
                 table
                 .row()
                 .data(rData)
                 .draw();
                 $("#myModal").modal("hide");
            });

更新 3

根据Vahap 的回答我更新了我的代码

$('.add-row').on('click', function() {
            id = 0;
            name = $('#name').val();
            email = $('#email').val();
            cno = $('#cno').val();
            bdy = $('#bday').val();
            
            t.row.add([
                name,
                email,
                cno,
                bdy,
                '<button class ="btn btn-danger del">Delete</button>' + '' + '<button class="btn btn-warning upd" data-id="'+$('#example').DataTable().rows().count()+'">Edit</button>'





            ]).draw(false);
            $("#name").val('');
            $("#email").val('');
            $("#cno").val('');
            $("#bday").val('');

        });

//save change button click evnet
         $("#btnsubmit").on('click',function (e) {
             // Prevent event propagation
            e.stopPropagation();
            var new_name = $("#name1").val();
                var new_email = $("#email1").val();
                var new_cno = $("#cno1").val();
                var new_dob = $("#dob1").val();
              
            const id = $(this).attr("data-id");
            console.log(id);
            var temp = $('#example').DataTable().row(id).data();
            temp[0] = new_name;
            temp[1] = new_email;
            temp[2] = new_cno;
            temp[3] = new_dob;
            $('#example').DataTable().row(id).data( temp ).draw(false);
       
                $("#myModal").modal("hide");
            });

但它仍然总是更新第一行。我也得到了undefined const id = $(this).attr("data-id"); console.log(id);

我可以添加一个新行，删除它并打开一个模式来编辑它。现在我想问的是如何将更新的值设置到我当前的datatable 行中？任何帮助将不胜感激。

Answer 1

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datatable</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body>
    <div>
        <h1>Data</h1>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleDataModal" id="addDataButton">
            Add Random Data to Table
        </button>
        <div style="padding:20px 5px;">
            <table id="example" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Sakura Yamamoto</td>
                        <td>Support Engineer</td>
                        <td>Tokyo</td>
                        <td>37</td>
                        <td>2009/08/19</td>
                        <td>$139,575</td>
                        <td>
                            <button type="button" class="btn btn-primary update" data-id="0">
                                Update
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>Thor Walton</td>
                        <td>Developer</td>
                        <td>New York</td>
                        <td>61</td>
                        <td>2013/08/11</td>
                        <td>$98,540</td>
                        <td>
                            <button type="button" class="btn btn-primary update" data-id="1">
                                Update
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div> 
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <script>
        var counter = 1;
$( document ).ready(function() {
    
        $('#addDataButton').on('click', function () {
                
            $('#example').DataTable().row.add( [
                'Juuso Temminen '+counter,
                'FrontEnd Engineer '+counter,
                'Riga ' +counter,
                '371 ' +counter ,
                '2021/3/3' +counter,
                '$123,23',
                '<button type="button" class="btn btn-primary update" data-id="'+$('#example').DataTable().rows().count()+'">Update</button>'
            ] ).draw( false );
            counter++;

        });
        
        
        $('.table tr .update').click(function(){
            const id = $(this).attr("data-id");
            var temp = $('#example').DataTable().row(id).data();
            temp[0] = 'Updated Datatable column '+ counter;
            $('#example').DataTable().row(id).data( temp ).draw(false);
            counter++;
        });
    });

    </script>
</body>
</html>

Datatable 有新的变化我试图为你创建一个演示页面它在本地工作我添加了插入和更新示例； 基本上，我试图从 Datatable 页面了解解决方案：https://datatables.net/examples/api/add_row.html