Member Avatar for Mark_65

Hey guys I am looking for a delete javascript function that will work with this code here. I have tried a few that I have found online. They work however they only seem to delete the first row. If you add rows none of those can be deleted there after. I'm still learning java but the id for the row is "myCells" and the id for the delete button is "delBtn". So i'm thinking I need something like everytime you click "delBtn" it removes "myCells" for that row.

I was trying to write it out:
var x = "myCells";
var y = "delBtn";
function removeRow() {
Not sure how to write it out but I was thinking something like when you click y it removes x. I think i'm on the right path but any suggestions and inputs are welcome. Thanks!

<!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="insertrow1.js"></script>
<script src="deleterow.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: &#36; <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 id="myCells">
        <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="removeRow(this)"></td>
    </tr>
</table>

    <p><b>Ending Amount: &#36; <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 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.innerText = "Delete";
            cell4.appendChild(e);
}
  • 3 Contributors
  • 4 Replies
  • 521 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by abubaker_2

Recommended Answers

All 4 Replies

Member Avatar for rubberman

Do you have a primary key or any unique keys defined for this table? If so, that is how you would do this deleting by primary key (unique) or another unique key.

Member Avatar for Mark_65

@rubberman, when you say a unique key are you referring to something like an id or class? If so the table has an id of "myTable".

Member Avatar for Mark_65

The current function I have to delete a row is down below. I am getting the id by the table but it will only delete the first row of the page. If you load the page and delete the first row and then add a row the delete function no longer works. Maybe the issue is with my insertRow function? 

function deleteRow() {
    document.getElementById("myTable").deleteRow(2);
}
Member Avatar for abubaker_2

As @rubberman u need u have a primary key to do somthing like this within your loop 

<a href='your_delete_page.php?name_of_variable=$the_primary_key_from_the_select_query'>

in your your_delete_page.php your recive the (name_of_variable that was send in the link after '?') with get so it will be $pk=$_GET['name_of_variable'];
the make the delete query using this $pk
hope it help :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.