What are some best practices for dynamically adding an "Edit" button to each row in a table displayed on a web page?

To dynamically add an "Edit" button to each row in a table displayed on a web page, you can use JavaScript to add an event listener to each row that creates the button when clicked. You can also use PHP to generate the table rows with a unique identifier for each row, making it easier to target the specific row for editing. 

// PHP code to generate a table with an "Edit" button for each row

echo '<table>';
foreach ($rows as $row) {
    echo '<tr id="row_' . $row['id'] . '">';
    foreach ($row as $key => $value) {
        echo '<td>' . $value . '</td>';
    }
    echo '<td><button class="edit-btn">Edit</button></td>';
    echo '</tr>';
}
echo '</table>';
```

```javascript
// JavaScript code to add event listener for "Edit" button click

document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // Get the row id
        var rowId = this.closest('tr').id.split('_')[1];
        
        // Redirect to edit page with row id
        window.location.href = 'edit.php?id=' + rowId;
    });
});

Keywords

PHP JavaScript DOM manipulation event delegation AJAX

Related Questions