Динамически добавить номер строки таблицы, используя jquery

Question

После ввода текста в поле ввода и нажатия кнопки «Добавить» должна появиться новая строка с написанным текстом. Каждая новая строка должна быть добавлена ​​под предыдущей. Кнопка «Удалить (x)» должна позволить пользователю удалить точную строку. Независимо от того, какая строка была удалена, порядок строк должен оставаться неизменным.

На данный момент я создал jQuery, который вставляет только текст из ввода в новый tr. Как сделать так, чтобы динамически добавить новый номер строки? Как сделать кнопку, похожую на X, чтобы удалить строку?

HTML

<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>

Jquery

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

Должно быть что-то вроде этого https://ibb.co/eGaVQd С уважением

Answer 1

Есть много способов сделать это. Когда я отправляю это, я вижу 3 жизнеспособных варианта, уже отправленных. Вот что я бы предложил.

$(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>

Исходя из вашего описания, вы хотите:

• текст, добавляемый из поля ввода
• каждая строка должна быть пронумерована
• каждая строка, позволяющая удалить запись
• номер, который остается последовательно упорядоченным, если запись удалена

Это имеет возможность сделать это. Использование события click или события submit дает нам возможность позволить пользователю нажать Enter или нажать кнопку «Добавить». Я добавил запрос, чтобы подтвердить пользователю, что он хочет удалить запись. Небольшая функция может использоваться для предоставления и обновления номеров для каждой строки.

Надеюсь, это поможет.

Answer 2

Это действительно грубо и будет выглядеть ужасно, но это будет делать то, что вы хотите.

$(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 3

Ну, вы начали строить из https://www.tutorialrepublic.com/faq/how-to-add-remove-table-rows-dynamically-using-jquery.php

Так почему бы не продолжить?

<!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>

---

Answer 4

Может быть это:

$(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>