Embedded Files
An overview of adding, deleting and editing values in a HTML table using JavaScript
An overview of adding, deleting and editing values in a HTML table using JavaScript
Adding a new row to a table
Adding a new row to a table
Step 1
Step 1
HTML - Create a empty table with headers and and give the table a unique ID. In this example we have two column table.
HTML - Create a empty table with headers and and give the table a unique ID. In this example we have two column table.
<table id ="results_table">
<tr><th>Item Number</th><th>Item Price</th></tr>
</table>
Step 2 - add a button that will trigger a function called addTableRow()
Step 2 - add a button that will trigger a function called addTableRow()
<button onclick="addTableRow()">Add a new row</button>
Step 3
Step 3
JavaScript- Make a reference to the table as a constant:
JavaScript- Make a reference to the table as a constant:
const results_table= document.getElementById("results_table");
Step 4
Step 4
JS Function - Create a new function that will add a new row to a HTML row and insert a value when run by the button
JS Function - Create a new function that will add a new row to a HTML row and insert a value when run by the button
function addTableRow() {
var row = results_table.insertRow(-1); //add a new row to end of table. -1 means go to end of table
row.insertCell(0).innerHTML = "value"; //add new value to cell 1
row.insertCell(1).innerHTML = "value"; //add new value to cell 2
}
Delete a Single Row from a Table Using a Button
Delete a Single Row from a Table Using a Button
Part 1 - Add a button to each row so we can delete it
Part 1 - Add a button to each row so we can delete it
Extend the addTableRow Function by adding an additional column and inserting a button that will run a function.
function addTableRow() {
var row = results_table.insertRow(-1); //add a new row to end of table. -1 means go to end of table
row.insertCell(0).innerHTML = "value"; //add new value to cell 1
row.insertCell(1).innerHTML = "value"; //add new value to cell 2
<input type='button' value='Delete' onclick=\"deleteRow(this)\"> //add a button in the third column
}
Part 2
Part 2
Create a new function to delete row in JS called deleteRow(r)
Create a new function to delete row in JS called deleteRow(r)
We will add an argument to the function
function deleteRow(cellNumber) {
var i = cellNumber.parentNode.parentNode.rowIndex; //get the row number of the table
results_table.deleteRow(i); //go to the table and delete the specific row number i
}
Note: this will not delete data from an array that is being displayed in the table. If you wish to do this, you will need to include code to delete the relevant item or object from the array.
If you know the row number that you wish to delete:
If you know the row number that you wish to delete:
table_name.deleteRow(2); //delete this row number of table
Or if you created a const referencing the table at the top of your JS Note: -1 will delete the last row
table_name.deleteRow(-1); //delete last row of table
Update a value already in a table if you know its location
Update a value already in a table if you know its location
We need to know the row number and column (cell) number.
Refence the table location and use array access to update the value using innerHTML
table_name.rows[3].cells[2].innerHTML="value"
//This will edit LN3
This is how a html table organises and labels each cell
Videos
Videos
When designing your web app (for example, the one shown in the image on the right), consider all the page layout areas you will need to give an individual ID. Below is some sample code with a number of clearly defined areas labeled with IDs. Additionally, this application will input data into an object, which in turn is pushed to an array. This data is then displayed in a table.
Report abuse