文章/答案/技术大牛

发布

社区首页 >问答首页 >在输入表中添加或删除行

问在输入表中添加或删除行
EN

Stack Overflow用户

提问于 2020-12-23 05:23:08

回答 2查看 1.1K关注 0票数 1

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

这是我的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在前端实现，它将对我很有帮助，或者如果它应该在后端用动态方法实现，它也会工作。

css

bootstrap-4

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-23 07:18:35

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

您可以在这里查看演示：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>

联署材料：

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

票数 1

Stack Overflow用户

发布于 2020-12-23 06:04:23

你的问题有很多部分，应该分解成几个问题。以下是删除行的简单方法。你会想让按钮点击，而不是我在这里做的。而且，您还需要进行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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65419407

复制

相似问题

问在输入表中添加或删除行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在输入表中添加或删除行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在输入表中添加或删除行
EN