How to get the row id onClick in jQuery/JavaScript?

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>

Please add a minimal reproducible example of your Data tables. — Always Helping
– Always Helping, Commented Aug 4, 2020 at 23:54
@AlwaysHelping there you go. I really dont know what else to add because this is not something like a bug which I cant figure out why code is behaving differently but its something that I dont even know how to handle. — showtime
– showtime, Commented Aug 5, 2020 at 0:00
Where is your new id appearing ? is it in a button ? To clarify you want to get the id of the row where you click at ? — Always Helping
– Always Helping, Commented Aug 5, 2020 at 0:02
@AlwaysHelping yes, I basically want the ID of the selected row (using the button, I dont click on row) and pass it to the function. I need the row ID so that I know which row to update later, — showtime
– showtime, Commented Aug 5, 2020 at 0:05

Always Helping · Accepted Answer · 2020-08-05 00:50:13Z

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>

edited Aug 5, 2020 at 0:50

answered Aug 5, 2020 at 0:43

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

showtime Over a year ago

thanks, it works! How can I actually update that row?

Always Helping Over a year ago

@B.S. Glad to hear that. For update i would recemend on ajax success you need to remove that row and use row.add with that index - Also you need add the edit button dynamically as well.

Always Helping Over a year ago

@B.S. You can update the same as well. Yes! but then you will need to use jQuery .append or .html function. Ideally if a data is added dynamically then i will remove the row and add the new row with that data.

showtime Over a year ago

interesting! I didn't know I can use .html actually, which resets the element with the new data. However, the hardest part is to do .html() to that specific row using the rowindex that you posted earlier.

Always Helping Over a year ago

@B.S. Sure. You need to pass the index of that specific row like this with new data on ajax success. table.row( rowindex ).data( newData ).draw();

|

Alexie01 · Accepted Answer · 2021-03-22 10:48:39Z

1

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. :)

answered Mar 22, 2021 at 10:48

Alexie01

1411 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to get the row id onClick in jQuery/JavaScript?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related