Hey guys i'm a noob with javascript. I have two scripts that generally do the same thing but each do not properly work with my code. The first script will work with adding rows and allow me to delete them, however it will also delete the top row. This is an issue because if you delete the top row and try to add a row it will not allow you to add it. Also whatever value is in the first rows cell it copys to each row you add for the first cell. It works but kind of annoying! The issue with the second script is it will allow me to add rows but only allow me to delete the top initial row. If I delete the first row I can add rows which is great but then you can not delete any of the rows added after that. I'm thinking it would be easier to get the delete function to work with the second script but any input is appreciated. FYI scripts are in separate files and I am not using both at the same time. Just trying to get one to work with the delete function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Finance</title>
<meta charset="UTF-8">
<meta name="finance" content="width=device-width, initial-scale=1.0">
<script src="tablefunctions.js"></script>
<style>
table {
padding-top: 15px;
}
td {
white-space: nowrap;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<h1>Financial Keeps</h1>
<p><b>Starting Amount: $ <input type="number" id="startamt" onkeyup="calc(this)"/></b></p>
<p>To subtract an amount place a minus (-) sign infront of the dollar amount.</p>
<button onclick="insertRow()">Add Row</button>
<table id="myTable">
<tr>
<th>Bill Info</th>
<th>Bill Amount</th>
<th>Due Date</th>
<th>Comment</th>
</tr>
<tr>
<td><input type="text" id="billInfo"></td>
<td><input type="number" id="billAmt" onkeyup="calc(this)"></td>
<td><input type="date" id="dueDate"></td>
<td><input type="text" id="commentBox"></td>
<td><input style="cursor: pointer;" type="button" id="delBtn" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
<p><b>Ending Amount: $ <span id="update">0</span></b></p>
<input type="hidden" id="total" name="total" value="0" />
</body>
</html>
function insertRow() {
var x = document.getElementById('myTable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
function insertRow() {
var x = document.getElementById("myTable");
var row = x.insertRow(x.rows.length);
var cell = row.insertCell(0);
var a = document.createElement("input");
cell.appendChild(a);
var cell1 = row.insertCell(1);
var b = document.createElement("input");
b.setAttribute("type","number");
cell1.appendChild(b);
var cell2 = row.insertCell(2);
var c = document.createElement("input");
c.setAttribute("type","date");
cell2.appendChild(c);
var cell3 = row.insertCell(3);
var d = document.createElement("input");
d.setAttribute("type","text");
cell3.appendChild(d);
var cell4 = row.insertCell(4);
var e = document.createElement("button");
e.innerHTML = "Delete";
cell4.appendChild(e);
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}