Добавить или удалить строку во входной таблице

Я пытаюсь создать веб-страницу с таблицей ввода, где пользователи могут добавлять или удалять строки по своему усмотрению. Пользовательский интерфейс, как это-

А вот и мой код html:

<div class = "container my-5">
  <h2>Welcome to dynamic input table with row adding option</h2>
  <form method = "" action = "">
    <table class = "table table-hover my-5">

        <thead class = "">
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Pnone Number</th>
                <th>Email</th>
                <th>Remove?</th>
            </tr>
        </thead>

        <tbody>         
          <tr>
            <td>1</td>
            <td><input type = "text" name = "name-1"></td>
            <td><input type = "text" name = "phone-1"></td>
            <td><input type = "text" name = "Email-1"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>
          <tr>
            <td>2</td>
            <td><input type = "text" name = "name-2"></td>
            <td><input type = "text" name = "phone-2"></td>
            <td><input type = "text" name = "Email-2"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>
          <tr>
            <td>3</td>
            <td><input type = "text" name = "name-3"></td>
            <td><input type = "text" name = "phone-3"></td>
            <td><input type = "text" name = "Email-3"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>
          <tr>
            <td>4</td>
            <td><input type = "text" name = "name-4"></td>
            <td><input type = "text" name = "phone-4"></td>
            <td><input type = "text" name = "Email-4"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>             
        </tbody>

      </table>
      <div class = "row m-0">
        <button class = "btn btn-warning">Add row</button>
        <button class = "btn btn-danger ml-3">Delete last row</button>
        <button type = "Submit" class = "btn btn-primary ml-auto">Submit</button>
      </div>  
  </form>  
</div>

<head>
    <title></title>

    <!-- media query support -->
    <meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1" />

    <!-- Latest compiled and minified CSS -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <!-- font awsome css link -->   
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

Теперь моя проблема заключается в том, как я могу реализовать функциональность кнопки Add row, кнопки Delete last row и кнопки remove. И все должно работать таким образом, чтобы я мог использовать это и для отправки данных в бэкенде. Я предпочитаю использовать Django и MongoDB для реализации моего бэкенда. Теперь, пожалуйста, помогите мне с лучшим способом реализации этого. Если он может быть реализован с помощью js во внешнем интерфейсе с помощью js, это будет очень полезно для меня, или если он должен быть реализован в бэкэнде с динамическим подходом, он также будет работать.

Можете ли вы сделать свой код исполняемым фрагментом? Если это так, я обновлю свой ответ, чтобы сделать его более полезным для вас.

— 23.12.2020 07:12

да, спасибо за предложение, все сделано

— 23.12.2020 07:39

javascript html css bootstrap-4

23.12.2020 06:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 579

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваш вопрос состоит из многих частей и должен быть разбит на несколько вопросов. Вот простой способ удаления строк. Вместо того, что я сделал здесь, вы захотите сделать кнопку для нажатия. И вы также захотите сделать вызов ajax, чтобы удалить фактические данные в вашей базе данных. Это просто интерфейсный код, визуально показывающий пользователю, что строка была удалена.

$('.my-5 tr').click(function(){
    $(this).remove();
    return false;
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container my-5">
  <h2>Welcome to dynamic input table with row adding option</h2>
  <form method = "" action = "">
    <table class = "table table-hover my-5">

        <thead class = "">
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Pnone Number</th>
                <th>Email</th>
                <th>Remove?</th>
            </tr>
        </thead>

        <tbody>         
          <tr>
            <td>1</td>
            <td><input type = "text" name = "name-1"></td>
            <td><input type = "text" name = "phone-1"></td>
            <td><input type = "text" name = "Email-1"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>
          <tr>
            <td>2</td>
            <td><input type = "text" name = "name-2"></td>
            <td><input type = "text" name = "phone-2"></td>
            <td><input type = "text" name = "Email-2"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>
          <tr>
            <td>3</td>
            <td><input type = "text" name = "name-3"></td>
            <td><input type = "text" name = "phone-3"></td>
            <td><input type = "text" name = "Email-3"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>
          <tr>
            <td>4</td>
            <td><input type = "text" name = "name-4"></td>
            <td><input type = "text" name = "phone-4"></td>
            <td><input type = "text" name = "Email-4"></td>
            <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;"></i></td>
          </tr>             
        </tbody>

      </table>
      <div class = "row m-0">
        <button class = "btn btn-warning">Add row</button>
        <button class = "btn btn-danger ml-3">Delete last row</button>
        <button type = "Submit" class = "btn btn-primary ml-auto">Submit</button>
      </div>  
  </form>  
</div>

Спасибо большое, может отлично визуально удалить любую ячейку. Но как я могу также добавить ячейку?

— 23.12.2020 07:40

А еще я стараюсь избегать ajax, так как не очень хорошо разбираюсь в асинхронной разработке бэкенда. Нет ли более простого способа сделать это?

— 23.12.2020 07:42

23.12.2020 07:04

Ответ принят как подходящий

Вы можете создать свою таблицу динамически, если хотите выполнять такие операции, как добавление и удаление.

Вы можете проверить демо здесь: https://jsbin.com/pewexibole/edit?html,js,console,output

HTML:

<head>
    <title></title>

    <!-- media query support -->
    <meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1" />

    <!-- Latest compiled and minified CSS -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <!-- font awsome css link -->   
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<div class = "container my-5">
  <h2>Welcome to dynamic input table with row adding option</h2>
    <table class = "table table-hover my-5">

        <thead class = "">
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Pnone Number</th>
                <th>Email</th>
                <th>Remove?</th>
            </tr>
        </thead>

        <tbody>        
        </tbody>

      </table>
      <div class = "row m-0">
        <button class = "btn btn-warning" onclick = "addRow()">Add row</button>
        <button class = "btn btn-danger ml-3">Delete last row</button>
        <button type = "Submit" class = "btn btn-primary ml-auto">Submit</button>
      </div>
</div>

JS:

let i = 0;

function rowTemplate(i) {
  return `<tr data-index=${i}>
      <td>${i}</td>
      <td><input type = "text" name = "name-${i}"></td>
      <td><input type = "text" name = "phone-${i}"></td>
      <td><input type = "text" name = "Email-${i}"></td>
      <td><i class = "fa fa-times-circle" style = "font-size: 22px; color: red;" onclick = "removeRow(${i})"></i></td>
    </tr>`
}

for (i = 0; i < 4; i ++) {
  $('tbody').append(rowTemplate(i));
}

function removeRow(i) {
  $("tbody").find(`tr[data-index='${i}']`).remove();
}

function addRow() {
  $('tbody').append(rowTemplate(i));
  i++;
}

большое спасибо, Ity работает отлично, теперь у меня только один вопрос; Для доступа вводятся данные из бэкенда, по какому имени мне его называть?

— 23.12.2020 08:29

Я не понимаю вашего вопроса, вы хотите получить данные из строк и отправить их на сервер?

— 23.12.2020 08:39

да, как я могу отправить все данные в бэкэнд? обычно я использую для отправки данных почтовым методом и получаю их по имени в Django. Здесь может быть каждый массив содержимого поля. как я могу получить к ним доступ из бэкэнда?

— 23.12.2020 09:03

23.12.2020 08:18