Javascript 在输入表中添加或删除行_Javascript_Html_Css_Bootstrap 4

Javascript 在输入表中添加或删除行

javascript html css bootstrap-4

Javascript 在输入表中添加或删除行,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我正在尝试设计一个带有输入表的网页，用户可以根据需要添加或删除行。像这样的用户界面- 这是我的html代码：欢迎使用带行添加选项的动态输入表不名称 Pnone号码电子邮件去除 1. 2. 3. 4. 添加行删除最后一行提交你的问题有很多部分，应该分成几个问题。下面是一种删除行的简单方法。您将希望使按钮单击，而不是我在这里所做的。而且，您还需要进行ajax调用来删除数据库中的实际数据。这只是前端代码，用于直观地向用户显示已删除的行 $'.my-5 tr'.单击函数{ $this

我正在尝试设计一个带有输入表的网页，用户可以根据需要添加或删除行。像这样的用户界面-

这是我的html代码：

欢迎使用带行添加选项的动态输入表不名称 Pnone号码电子邮件去除 1. 2. 3. 4. 添加行删除最后一行提交

你的问题有很多部分，应该分成几个问题。下面是一种删除行的简单方法。您将希望使按钮单击，而不是我在这里所做的。而且，您还需要进行ajax调用来删除数据库中的实际数据。这只是前端代码，用于直观地向用户显示已删除的行

$'.my-5 tr'.单击函数{ $this.remove；返回false； }; 欢迎使用带行添加选项的动态输入表不名称 Pnone号码电子邮件去除 1. 2. 3. 4. 添加行删除最后一行提交

如果要执行添加和删除等操作，可以动态创建表

您可以在此处查看演示：

HTML:

JS:

如果要执行添加和删除等操作，可以动态创建表

您可以在此处查看演示：

HTML:

JS:

你能让你的代码成为一个可运行的代码段吗？如果是这样的话，我会更新我的答案，让它对你更有用。是的，谢谢你的建议，是这样的，你能让你的代码成为一个可运行的代码片段吗？如果是这样的话，我会更新我的答案，让它对你更有用。是的，谢谢你的建议，它是doneThanks很多，它可以完美地视觉删除任何细胞。但是我怎样才能添加一个单元格呢？我也尽量避免使用ajax，因为我不太擅长异步后端开发。有没有更简单的方法可以做到这一点？非常感谢，它可以完美地从视觉上移除任何细胞。但是我怎样才能添加一个单元格呢？我也尽量避免使用ajax，因为我不太擅长异步后端开发。有没有更简单的方法可以做到这一点呢？非常感谢，Ity工作得非常完美，现在我只有一个问题；要访问后端输入的数据，我应该使用哪个名称？我不明白你的问题，你想从行中获取数据并将其发送到后端吗？是的，我如何发送后端中的所有数据？通常，我使用post方法发送数据，并在Django中按其名称接收数据。这里可能是每个字段内容数组。我怎样才能真正从后端访问它们呢？非常感谢，City工作得非常好，现在我只有一个问题；要访问后端输入的数据，我应该使用哪个名称？我不明白你的问题，你想从行中获取数据并将其发送到后端吗？是的，我如何发送后端中的所有数据终止通常，我使用post方法发送数据，并在Django中按其名称接收数据。这里可能是每个字段内容数组。如何从后端实际访问它们？

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

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