如何在 jQuery/JavaScript 中获取行 ID onClick？

Question

I have a table populated with dynamic data. the last column has a button which when I click I would like to pass the row id to the JS function. I need the id because I am doing a POST Ajax request and on success I want to take the response data and update the selected row with new data.

This is what I would do to insert a new row:

var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();

but what can I do to get the row ID and update it with the response data?

EDIT. Datatable:

<table id="myTable" class="display compact" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Reg</th>  
                <th>Edit</th>                   
            </tr>
        </thead>
        <tbody>
            <?php foreach (get_all_customers_list() as $user) { ?>
                    <tr>
                        <td>
                            <b> <?php echo $user["recipient_name"]; ?></b>
                        </td>
                        <td>
                            <?php echo $user["registration_date"]; ?>
                        </td>                       
                        <td>
                            <button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button>                             
                        </td>
                    </tr>
            <?php }?>
        </tbody>
 </table>

Answer 1

Since you are only wanted to get the row id of the clicked row edit button. You can simply use table.row function and pass the actual tr of the clicked button.

Demo (Showing the actual id (1, 2) which is stored as name)

 var table = $('#myTable').DataTable({}) //edit customer here function edit_customer_request(_this) { //Getting the actual table ID var row = $(_this).parents('tr')[0]; //Data table row id console.log(table.row(row).data()[0]); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" /> <table id="myTable" class="display compact" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Reg</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Blah</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td> </tr>tr> <tr> <td>2</td> <td>Blah Nixon</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this,2)' value="2" name="edit_customer">Edit</button></td> </tr> </tbody> </table>

Demo (Showing the actual index of table - Index start from 0 to depending on how many rows you have)

 var table = $('#myTable').DataTable({}) //edit customer here function edit_customer_request(_this) { //get the closest of clicked edit button var tr = $(_this).closest("tr"); //get the index of row var rowindex = tr.index(); //Index of row console.log(rowindex) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" /> <table id="myTable" class="display compact" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Reg</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Blah</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td> </tr>tr> <tr> <td>2</td> <td>Blah Nixon</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this,2)' value="2" name="edit_customer">Edit</button></td> </tr> </tbody> </table>

Answer 2

this is my simple answer:

var table = $('#table-values');

$('#table-values').on( 'click', 'tr', function(){
    var id = this.id;

    alert( 'Clicked row id '+id );
  });

Easy. :)