How can additional rows be dynamically added to a table generated by PHP in WordPress?

To dynamically add additional rows to a table generated by PHP in WordPress, you can use JavaScript to append new rows when needed. You can create a button that triggers a JavaScript function to add a new row to the table. This way, users can add rows dynamically without having to reload the page. 

// PHP code to generate the initial table
echo '<table id="myTable">';
echo '<tr><th>Header 1</th><th>Header 2</th></tr>';
echo '<tr><td>Data 1</td><td>Data 2</td></tr>';
echo '</table>';

// JavaScript code to add a new row to the table
echo '<button onclick="addRow()">Add Row</button>';
echo '<script>';
echo 'function addRow() {';
echo 'var table = document.getElementById("myTable");';
echo 'var row = table.insertRow(-1);';
echo 'var cell1 = row.insertCell(0);';
echo 'var cell2 = row.insertCell(1);';
echo 'cell1.innerHTML = "New Data 1";';
echo 'cell2.innerHTML = "New Data 2";';
echo '}';
echo '</script>';

Keywords

PHP WordPress dynamic rows table generation JavaScript

Related Questions