Dynamically add table row number using jquery

Question

After entering a text in the input field and click the "Add" button, a new row should appear with the text written. Each new row has to be added under the previous. The "Delete button (x)" Should alow the user to delete the exact row. No matter which row has been deleted the order of the rows should remain the same.

For now, I made a jQuery that inserts only the text from the input to a new tr. How to make it to add dynamically a new row number? How can i make button that looks like X to delete the row ?

 $(document).ready(function(){ $(".add-row").click(function(){ var name = $("#name").val(); var markup = "<tr><td>" + name + "</td></tr>"; $("table tbody").append(markup); })});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="text" id="name" placeholder="Name"> <input type="button" class="add-row" value="Add Row"> </form> <table> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Peter Parker</td> </tr> </tbody> </table>

It must be something like this https://ibb.co/eGaVQd Kind regards

Answer 1

There are lots of ways to do this. As I post this, I see 3 viable options already posted. Here is what I would suggest.

 $(function() { function numberRows($t) { var c = 0; $t.find("tr").each(function(ind, el) { $(el).find("td:eq(0)").html(++c + "."); }); } $("#add-service-button").click(function(e) { e.preventDefault(); var $row = $("<tr>"); $row.append($("<td>")); $row.append($("<td>").html($("#add-service").val())); $row.append($("<td>").html("<a class='del-service' href='#' title='Click to remove this entry'>X</a>")); $row.appendTo($("#service-table tbody")); numberRows($("#service-table")); }); $("#form-entry form").submit(function(e) { e.preventDefault(); $("#add-service-button").trigger("click"); }); $("#service-table").on("click", ".del-service", function(e) { e.preventDefault(); var $row = $(this).parent().parent(); var retResult = confirm("Are you sure you wish to remove this entry?"); if (retResult) { $row.remove(); numberRows($("#service-table")); } }); });

 .form-entry input { border: 1px solid #ccc; width: 75%; line-height: 2em; padding-left: 1em; } .form-entry button { border: 0; background-color: #5AD0A1; color: #fff; cursor: pointer; padding: .6em 1.25em; } .table-wrapper { font-family: Arial, sans-serif; } .table-wrapper table td { border-bottom: 1px dashed #ccc; padding: 1em .2em; } .table-wrapper table tr:last-child td { border-bottom: 0; } .table-wrapper table td:first-child { color: #ccc; width: 2em; } .table-wrapper table td:last-child a { color: #F00; text-decoration: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-entry"> <form> <input type="text" id="add-service" placeholder="Enter your service name here..." /> <button type="submit" id="add-service-button">Add</button> </form> </div> <div class="table-wrapper"> <table id="service-table" width="100%"> <tbody> </tbody> </table> </div>

Based on your description, you want:

• text to be added from the entry field
• each row to be numbered
• each row to allow the entry to be deleted
• the number to remain consistently ordered if an entry is deleted

This has the ability to do this. Using click event or submit event gives us the ability to let the user press Enter key or click the "Add" button. I added a prompt to confirm with the user that they wish to remove the entry. A small function can be used to then supply and update the numbers for each row.

Hope this helps.

Answer 2

May be this:

 $(document).ready(function(){ $(".add-row").click(function(){ var name = $("#name").val(); var markup = "<tr><td>" + name + "</td><td style=\\"cursor:pointer;\\" onclick=\\"del(this);\\">Delete</td></tr>"; $("table tbody").append(markup); $("#name").val(''); }); }); function del(_el){ $(_el).parent().remove(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <input type="text" id="name" placeholder="Name"> <input type="button" class="add-row" value="Add Row"> </form> <table border="1"> <thead> <tr> <th>Name</th><th>&nbsp;</th> </tr> </thead> <tbody> <tr> <td>Peter Parker</td><td style="cursor:pointer;" onclick="del(this);">Delete</td> </tr> </tbody> </table>

Answer 3

This is really crude and will look terrible but it will do what you want it to do.

$(document).ready(function(){
    var count = 1;
        $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = "<tr><td>"+ count + name + "<button>x</button</td></tr>";
        count++
        $("table tbody").append(markup);
   })
});

Answer 4

Well you started building off of https://www.tutorialrepublic.com/faq/how-to-add-remove-table-rows-dynamically-using-jquery.php

So why not continue?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Peter Parker</td>
            </tr>
        </tbody>
    </table>

<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var markup = "<tr><td><button onclick=\"removeItem(this);\">X</button></td><td>" + name + "</td></tr>";
            $("table tbody").append(markup);
        });
    });

    function removeItem(e){
            $(e).parent().parent().remove();
    }
</script>
</body>
</html>

---