103 views
JavaScript editable table
To create an editable table in JavaScript, you can utilize the HTML <table> element along with JavaScript event handling. Here’s an example of how you can achieve this:
HTML:
HTML<span role="button" tabindex="0" data-code="<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<tr>
<td contenteditable="true">John Doe</td>
<td contenteditable="true">[email protected]</td>
<td>
<button onclick="saveRow(this)">Save</button>
<button onclick="deleteRow(this)">Delete</button>
</td>
</tr>
<tr>
<td contenteditable="true">Jane Doe</td>
<td contenteditable="true">[email protected]</td>
<td>
<button onclick="saveRow(this)">Save</button>
<button onclick="deleteRow(this)">Delete</button>
</td>
</tr>
</table>
<button onclick="addRow()">Add Row
<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<tr>
<td contenteditable="true">John Doe</td>
<td contenteditable="true">[email protected]</td>
<td>
<button onclick="saveRow(this)">Save</button>
<button onclick="deleteRow(this)">Delete</button>
</td>
</tr>
<tr>
<td contenteditable="true">Jane Doe</td>
<td contenteditable="true">[email protected]</td>
<td>
<button onclick="saveRow(this)">Save</button>
<button onclick="deleteRow(this)">Delete</button>
</td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>JavaScript:
JavaScript<span role="button" tabindex="0" data-code="function saveRow(button) {
var row = button.parentNode.parentNode;
var name = row.cells[0].innerText;
var email = row.cells[1].innerText;
// Perform save operation or update data in your application
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function addRow() {
var table = document.getElementById("myTable");
var newRow = table.insertRow();
var nameCell = newRow.insertCell();
var emailCell = newRow.insertCell();
var actionCell = newRow.insertCell();
nameCell.contentEditable = true;
emailCell.contentEditable = true;
actionCell.innerHTML = '<button onclick="saveRow(this)">Save</button> <button onclick="deleteRow(this)">Delete
function saveRow(button) {
var row = button.parentNode.parentNode;
var name = row.cells[0].innerText;
var email = row.cells[1].innerText;
// Perform save operation or update data in your application
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function addRow() {
var table = document.getElementById("myTable");
var newRow = table.insertRow();
var nameCell = newRow.insertCell();
var emailCell = newRow.insertCell();
var actionCell = newRow.insertCell();
nameCell.contentEditable = true;
emailCell.contentEditable = true;
actionCell.innerHTML = '<button onclick="saveRow(this)">Save</button> <button onclick="deleteRow(this)">Delete</button>';
}In this example, the <td> elements are set as contenteditable="true", which allows the user to edit the content directly in the table cells. The JavaScript functions saveRow(), deleteRow(), and addRow() handle the actions of saving, deleting, and adding rows respectively. When the “Save” button is clicked, the corresponding row data can be accessed and processed in your application.