在输入表中添加或删除行
[英]Add or Remove Row in Input Table
问题描述
I am trying to design a webpage with an input table where users can add or remove rows as they want.
我正在尝试设计一个带有输入表的网页，用户可以在其中根据需要添加或删除行。 UI like this-像这样的用户界面-
And here is my html code:这是我的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>
Now my problem is how can I implement the functionality of Add row button, Delete last row button, and the remove .现在我的问题是如何实现Add row按钮、 Delete last row按钮和remove的功能。 And all should work in such a way that I can use this for data sending in the backend also.所有这些都应该以这样一种方式工作，即我也可以使用它在后端发送数据。 I will prefer to use Django and MongoDB to implement my backend.我更喜欢使用Django和MongoDB来实现我的后端。 Now please help me with the best way to implement this, If it can implement with js in the frontend with js it will be very helpful for me, or if it should implement in the backend with the dynamic approach it will work also.现在请帮助我用最好的方法来实现它，如果它可以用 js 在前端用 js 实现，那对我很有帮助，或者如果它应该用动态方法在后端实现它也可以。
2 个解决方案
解决方案1
2 2020-12-23 06:04:23
Your question has many parts and should be broken down into several questions.你的问题有很多部分，应该分成几个问题。 Here's a simple way to delete rows.这是删除行的简单方法。 You'll want to make button to click on instead of what I've done here.你会想要让按钮点击而不是我在这里所做的。 And, you'll also want to make an ajax call to delete the actual data in your database.而且，您还需要调用 ajax 来删除数据库中的实际数据。 This is just front-end code to visually show the user a row has been deleted.这只是前端代码，用于直观地向用户显示一行已被删除。
$('.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
1 已采纳 2020-12-23 07:18:35
You can create your table dynamically, if you want to do operations like add and delete.如果要执行添加和删除等操作，可以动态创建表。
You can check out the demo here: https://jsbin.com/pewexibole/edit?html,js,console,output您可以在此处查看演示： https://jsbin.com/pewexibole/edit?html,js,console,output
HTML: 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: 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++;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.