I’m having an issue where whenever I add a new item to my table, it ends up at the top and replaces the original header. I would prefer if the new item gets added as the last row.
Here is a screenshot of the problem:
var rIndex,
table = document.getElementById("table");
// checking for empty input
function checkEmptyInput()
{
var isEmpty = false,
Uname = document.getElementById("Uname").value,
Cname = document.getElementById("Cname").value,
Tname = document.getElementById("Tname").value,
Kname = document.getElementById("Kname").value,
Mname = document.getElementById("Mname").value,
Oname = document.getElementById("Oname").value;
if(Uname === ""){
alert("This field cannot be empty");
isEmpty = true;
}
else if(Cname === ""){
alert("This field cannot be empty");
isEmpty = true;
}
else if(Tname === ""){
alert("This field cannot be empty");
isEmpty = true;
}else if(Kname === ""){
alert("This field cannot be empty");
isEmpty = true;
}
else if(Mname === ""){
alert("This field cannot be empty");
isEmpty = true;
}else if(Oname === ""){
alert("This field cannot be empty");
isEmpty = true;
}
return isEmpty;
}
// adding a new row to the table
function addHtmlTableRow()
{
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
cell6 = newRow.insertCell(5),
Uname = document.getElementById("Uname").value,
Cname = document.getElementById("Cname").value,
Tname = document.getElementById("Tname").value,
Kname = document.getElementById("Kname").value,
Mname = document.getElementById("Mname").value,
Oname = document.getElementById("Oname").value;
cell1.innerHTML = Uname;
cell2.innerHTML = Cname;
cell3.innerHTML = Tname;
cell4.innerHTML = Kname;
cell5.innerHTML = Mname;
cell6.innerHTML = Oname;
// call the function to set the event to the new row
selectedRowToInput();
}
}
// displaying data from selected row into input text fields
function selectedRowToInput()
{
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
// get the selected row index
rIndex = this.rowIndex;
document.getElementById("Uname").value = this.cells[0].innerHTML;
document.getElementById("Cname").value = this.cells[1].innerHTML;
document.getElementById("Tname").value = this.cells[2].innerHTML;
document.getElementById("Kname").value = this.cells[3].innerHTML;
document.getElementById("Mname").value = this.cells[4].innerHTML;
document.getElementById("Oname").value = this.cells[5].innerHTML;
};
}
}
selectedRowToInput();
function editHtmlTableSelectedRow()
{
var Uname = document.getElementById("Uname").value,
Cname = document.getElementById("Cname").value,
Tname = document.getElementById("Tname").value,
Kname = document.getElementById("Kname").value,
Mname = document.getElementById("Mname").value,
Oname = document.getElementById("Oname").value;
if(!checkEmptyInput()){
table.rows[rIndex].cells[0].innerHTML = Uname;
table.rows[rIndex].cells[1].innerHTML = Cname;
table.rows[rIndex].cells[2].innerHTML = Tname;
table.rows[rIndex].cells[3].innerHTML = Kname;
table.rows[rIndex].cells[4].innerHTML = Mname;
table.rows[rIndex].cells[5].innerHTML = Oname;
}
}
function removeSelectedRow()
{
table.deleteRow(rIndex);
document.getElementById("Uname").value ="";
document.getElementById("Cname").value ="";
document.getElementById("Tname").value ="";
document.getElementById("Kname").value ="";
document.getElementById("Mname").value ="";
document.getElementById("Oname").value ="";
}.container{overflow: hidden}
.tab{float: left;}
.tab-2{margin-left: 50px}
.tab-2 input{display: block;margin-bottom: 10px}
tr{transition:all .25s ease-in-out}
tr:hover{background-color:#EEE;cursor: pointer}
<!DOCTYPE html>
<html>
<head>
<title>Add Edit Remove HTML Table Row</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{overflow: hidden}
.tab{float: left;}
.tab-2{margin-left: 50px}
.tab-2 input{display: block;margin-bottom: 10px}
tr{transition:all .25s ease-in-out}
tr:hover{background-color:#EEE;cursor: pointer}
</style>
</head>
<body>
<div class="container">
<div class="tab tab-1">
<table id="table" border="1" >
<tr class="header">
<th class="style2">Unit Num.</th>
<th class="style3">Computer</th>
<th class="style3">Tower</th>
<th class="style9">Keyboard</th>
<th class="style3">Mouse</th>
<th class="style4">Overall State</th>
</tr>
<tr>
<td class="style5">1</td>
<td class="style5">1</td>
<td class="style5">1</td>
<td class="style7">1</td>
<td class="style5">1</td>
<td class="style6">Very Good</td>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>10</td>
<td>A1</td>
<td>B1</td>
<td>10</td>
</tr>
</table>
</div>
<div class="tab tab-2">
Unit Number :<input type="number" name="Uname" id="Uname">
Computer ID :<input type="number" name="Cname" id="Cname">
Tower ID :<input type="number" name="Tname" id="Tname">
Keyboard ID :<input type="number" name="Kname" id="Kname">
Mouse ID :<input type="number" name="Mname" id="Mname">
Overall State :<input type="number" name="Oname" id="Oname">
<button onclick="addHtmlTableRow();">Add</button>
<button onclick="editHtmlTableSelectedRow();">Edit</button>
<button onclick="removeSelectedRow();">Remove</button>
</div>
</div>
</body>
</html>