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

Twisty · Accepted Answer · 2018-05-10 03:04:08Z

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.

Good sir, I really appreciate your help. You saved me. Thank you! :)
Glad it helps. Hopefully you will mark it as the answer and upvote if it did help.

mscdeveloper · Accepted Answer · 2018-05-09 21:34:01Z

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>

Colin Barstow · Accepted Answer · 2018-05-09 21:38:38Z

0

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);
   })
});

answered May 9, 2018 at 21:38

Colin Barstow

5522 silver badges12 bronze badges

Comments

Billy Fischbach · Accepted Answer · 2018-05-09 21:47:13Z

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>

Collectives™ on Stack Overflow

Dynamically add table row number using jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related