Breaking News: Grepper is joining You.com. Read the official announcement!

datatable add button

YOU.com answered on September 11, 2023 Popularity 7/10 Helpfulness 1/10

answer datatable add button

datatable add button

Comment

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
  </head>
  <body>
    <table id="datatable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Actions</th> <!-- Add a column for buttons -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>25</td>
          <td><button onclick="editRow(this)">Edit</button></td> <!-- Add a button to each row -->
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>30</td>
          <td><button onclick="editRow(this)">Edit</button></td> <!-- Add a button to each row -->
        </tr>
        <!-- More rows... -->
      </tbody>
    </table>

    <script>
      $(document).ready(function() {
        $('#datatable').DataTable();
      });

      function editRow(button) {
        var row = button.parentNode.parentNode; // Get the clicked row
        // Perform any action you need, e.g., fetch data for editing

        // Example: Log the name and age of the row
        var name = row.cells[0].innerHTML;
        var age = row.cells[1].innerHTML;
        console.log('Editing row:', name, age);
      }
    </script>
  </body>
</html>

Popularity 7/10 Helpfulness 1/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

datatable add button

Contents

More Related Answers

datatable add button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.