I am having two minor issues with the following code and I would appreciate any help.

First of all, when I try to delete data that's been created from the "add row" button, I am unable to do so. I would like this delete button to function the same way the others on this page do.

Secondly, I would like to adjust the code so that the table doesn't lose it's formatting whenever I click "edit," "save," or "delete." What happens now is the table looks one way when the page is loaded, but as soon as a button is clicked, the rows and columns start to display differently. I would like to avoid that if possible. Any help would be appreciated! Also, if you make changes to this code, could you please comment where and why? Thanks!

index.html

Completed Exercises

Name	Reps	Weight	Date	Unit
Deadlift	5	60	Test 4	Test 5
Squats	Test 7	Test 8	Test 9	Test 10

script.js

/****************************************************************

* deleteRow *

* This function takes two parameters: tableID and currentRow. *

* When called, it goes through every element of the current row *

* and permanently removes the information from the table and *

* the database. If there is only one row remaining, excluding *

* the table header row, an alert message is displayed, telling *

* the user they cannot delete the last row. *

****************************************************************/

function deleteRow(tableID,currentRow) {

try {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;

for (var i = 0; i < rowCount; i++) {

var row = table.rows[i];

/*var chkbox = row.cells[0].childNodes[0];*/

/*if (null != chkbox && true == chkbox.checked)*/

if (row==currentRow.parentNode.parentNode) {

if (rowCount <= 2) {

alert("Cannot delete all the rows.");

break;

}

table.deleteRow(i);

rowCount--;

i--;

}

}

} catch (e) {

alert(e);

}

//getValues();

}

/****************************************************************

* edit_row *

* This function takes one parameter: no, which corresponds to *

* the unique number assigned to each row of the table. *

****************************************************************/

function edit_row(no)

{

document.getElementById("edit_button"+no).style.display="none";

document.getElementById("save_button"+no).style.display="block";

var name=document.getElementById("name_row"+no);

var reps=document.getElementById("reps_row"+no);

var weight=document.getElementById("weight_row"+no);

var date=document.getElementById("date_row"+no);

var unit=document.getElementById("unit_row"+no);

var name_data=name.innerHTML;

var reps_data=reps.innerHTML;

var weight_data=weight.innerHTML;

var date_data=date.innerHTML;

var unit_data=unit.innerHTML;

name.innerHTML="";

reps.innerHTML="";

weight.innerHTML="";

date.innerHTML="";

unit.innerHTML="";

}

function save_row(no)

{

var name_val=document.getElementById("name_text"+no).value;

var reps_val=document.getElementById("reps_text"+no).value;

var weight_val=document.getElementById("weight_text"+no).value;

var date_val=document.getElementById("date_text"+no).value;

var unit_val=document.getElementById("unit_text"+no).value;

document.getElementById("name_row"+no).innerHTML=name_val;

document.getElementById("reps_row"+no).innerHTML=reps_val;

document.getElementById("weight_row"+no).innerHTML=weight_val;

document.getElementById("date_row"+no).innerHTML=date_val;

document.getElementById("unit_row"+no).innerHTML=unit_val;

document.getElementById("edit_button"+no).style.display="block";

document.getElementById("save_button"+no).style.display="none";

}

function add_row()

{

var new_name=document.getElementById("new_name").value;

var new_reps=document.getElementById("new_reps").value;

var new_weight=document.getElementById("new_weight").value;

var new_date=document.getElementById("new_date").value;

var new_unit=document.getElementById("new_unit").value;

var table=document.getElementById("dataTable");

var table_len=(table.rows.length)-1;

var row = table.insertRow(table_len).outerHTML=""+new_name+""+new_reps+""+new_weight+""+new_date+""+new_unit+" ";

// var row = table.insertRow(table_len).outerHTML=""+new_name+""+new_reps+""+new_weight+""+new_date+""+new_unit+" ";

// var row = table.insertRow(table_len).outerHTML=""+new_name+""+new_reps+""+new_weight+""+new_date+""+new_unit+" ";

document.getElementById("new_name").value="";

document.getElementById("new_reps").value="";

document.getElementById("new_weight").value="";

document.getElementById("new_date").value="";

document.getElementById("new_unit").value="";

}

style.css

input.selected {

border-color:lightgreen;

}

/*TABLE SETTINGS*/

table {

font-family: arial, sans-serif;

border-collapse: collapse;

/*border-collapse: separate;*/

width: 70%;

}

td, th {

border: 1px solid #dddddd;

text-align: left;

/*padding: 8px;*/

padding: 5;

border-spacing: 2;

}

tr:nth-child(even) {

background-color: #dddddd;

}