Dynamic buttons in table for delete/edit data with Javascript (CodeIgniter)

Question

I have created table, which shows users of my web. I want to add "Edit" and "Delete" buttons into table, it was easy (works dynamically), but I how can I set, that each button will work for its table row. For example: each user information row has "Edit" and "Delete" button and these buttons work only for their row (I can edit and delete each user by using their buttons). Also, best solution for it will be JavaScript, so any ideas?

Answer 1

I assume the data for the table comes from a database call, with each user having a record ID.
So either add an id or data attribute to the row when creating the tables rows.

<tr data-id="<?php echo $record_id; ?>">
    <td>
        foo
    </td>
    <td>
        bar
    </td>
    <td>
        <a class="edit-link" href="javascript:;" title="Edit User">Edit</a>
    </td>
    <td>
        <a class="delete-link" href="javascript:;" title="Delete User">Delete</a>
    </td>
</tr>

Using JavaScript you can get the record ID of the user from the data-id of the row.
For edit;

$('.edit-link').on('click', function () {
    var user_id = $(this).parent().parent('tr').attr('data-id');
    // now do whatever you want
});

For delete;

$('.delete-link').on('click', function () {
    var user_id = $(this).parent().parent('tr').attr('data-id');
    // now do whatever you want
});