Two Minor Issues Following Code Would Appreciate Help First Try Delete Data S Created Add Q29662956

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

First of all, when I try to delete data that’s been created fromthe “add row” button, I am unable to do so. I would like thisdelete button to function the same way the others on this pagedo.

Secondly, I would like to adjust the code so that the tabledoesn’t lose it’s formatting whenever I click “edit,” “save,” or”delete.” What happens now is the table looks one way when the pageis loaded, but as soon as a button is clicked, the rows and columnsstart to display differently. I would like to avoid that ifpossible. Any help would be appreciated! Also, if you make changesto this code, could you please comment where and why? Thanks!

index.html

<!DOCTYPE html>

<html>

<head>

<script type=”text/javascript”src=”script.js”></script>

<link href=”style.css” rel=”stylesheet” type=”text/css”>  

</head>

<body>

<div id=”wrapper”>

<h2 align=”center”>Completed Exercises</h2>

<table align=’center’ id=”dataTable”>

<tr>

<th>Name</th>

<th>Reps</th>

<th>Weight</th>

<th>Date</th>

<th>Unit</th>

<th></th>

</tr>

  

<tr id=”row1″>

<td id=”name_row1″>Deadlift</td>

<td id=”reps_row1″>5</td>

<td id=”weight_row1″>60</td>

<td id=”date_row1″>Test 4</td>

<td id=”unit_row1″>Test 5</td>

<td>

<input type=”button” id=”edit_button1″ value=”Edit”class=”edit” onclick=”edit_row(‘1’)”>

<input type=”button” id=”save_button1″ value=”Save”class=”save” onclick=”save_row(‘1’)”>

<input type=”button” value=”Delete”onclick=”deleteRow(‘dataTable’,this)”>

</td>

</tr>

  

<tr id=”row2″>

<td id=”name_row2″>Squats</td>

<td id=”reps_row2″>Test 7</td>

<td id=”weight_row2″>Test 8</td>

<td id=”date_row2″>Test 9</td>

<td id=”unit_row2″>Test 10</td>

<td><input type=”button” id=”edit_button2″ value=”Edit”class=”edit” onclick=”edit_row(‘2’)”>

<input type=”button” id=”save_button2″ value=”Save”class=”save” display=”none” onclick=”save_row(‘2’)”>

<input type=”button” value=”Delete”onclick=”deleteRow(‘dataTable’,this)”>

</td>

</tr>

<tr>

<td><input type=”text” id=”new_name”></td>

<td><input type=”text” id=”new_reps”></td>

<td><input type=”text”id=”new_weight”></td>

<td><input type=”text” id=”new_date”></td>

<td><input type=”text” id=”new_unit”></td>

<td><input type=”button” class=”add”onclick=”add_row();” value=”Add Row”></td>

</tr>

</table>

</div>

</body>

</html>

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=”<input type=’text’ id=’name_text”+no+”‘value='”+name_data+”‘>”;

reps.innerHTML=”<input type=’text’ id=’reps_text”+no+”‘value='”+reps_data+”‘>”;

weight.innerHTML=”<input type=’text’ id=’weight_text”+no+”‘value='”+weight_data+”‘>”;

date.innerHTML=”<input type=’text’ id=’date_text”+no+”‘value='”+date_data+”‘>”;

unit.innerHTML=”<input type=’text’ id=’unit_text”+no+”‘value='”+unit_data+”‘>”;

}

function save_row(no)

{

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

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

varweight_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=”<trid=’row”+table_len+”‘><tdid=’name_row”+table_len+”‘>”+new_name+”</td><tdid=’reps_row”+table_len+”‘>”+new_reps+”</td><tdid=’weight_row”+table_len+”‘>”+new_weight+”</td><tdid=’date_row”+table_len+”‘>”+new_date+”</td><tdid=’unit_row”+table_len+”‘>”+new_unit+”</td><td><inputtype=’button’ id=’edit_button”+table_len+”‘ value=’Edit’class=’edit’ onclick=’edit_row(“+table_len+”)’> <inputtype=’button’ id=’save_button”+table_len+”‘ value=’Save’class=’save’ onclick=’save_row(“+table_len+”)’> <inputtype=’button’ value=’Delete’ clss=’delete’onclick=’deleteRow(‘dataTable’,”+table_len+”)’></td></tr>”;

// var row = table.insertRow(table_len).outerHTML=”<trid=’row”+table_len+”‘><tdid=’name_row”+table_len+”‘>”+new_name+”</td><tdid=’reps_row”+table_len+”‘>”+new_reps+”</td><tdid=’weight_row”+table_len+”‘>”+new_weight+”</td><tdid=’date_row”+table_len+”‘>”+new_date+”</td><tdid=’unit_row”+table_len+”‘>”+new_unit+”</td><td><inputtype=’button’ id=’edit_button”+table_len+”‘ value=’Edit’class=’edit’ onclick=’edit_row(“+table_len+”)’> <inputtype=’button’ id=’save_button”+table_len+”‘ value=’Save’class=’save’ onclick=’save_row(“+table_len+”)’> <inputtype=’button’ value=’Delete’ class=’delete’onclick=’deleteRow(‘dataTable’)’></td></tr>”;

// var row = table.insertRow(table_len).outerHTML=”<trid=’row”+table_len+”‘><tdid=’name_row”+table_len+”‘>”+new_name+”</td><tdid=’reps_row”+table_len+”‘>”+new_reps+”</td><tdid=’weight_row”+table_len+”‘>”+new_weight+”</td><tdid=’date_row”+table_len+”‘>”+new_date+”</td><tdid=’unit_row”+table_len+”‘>”+new_unit+”</td><td><inputtype=’button’ id=’edit_button”+table_len+”‘ value=’Edit’class=’edit’ onclick=’edit_row(“+table_len+”)’> <inputtype=’button’ id=’save_button”+table_len+”‘ value=’Save’class=’save’ onclick=’save_row(“+table_len+”)’> <inputtype=’button’ value=’Delete’ class=’delete’onclick=’delete_row(“+table_len+”)’></td></tr>”;

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;

}

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *