在输入表中添加或删除行 [英] 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-
这是我的 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>现在，我的问题是如何实现添加行按钮，删除最后一行按钮和删除的功能.所有人都应该以这样的方式工作，以便我也可以将其用于后端中的数据发送.我将更喜欢使用 Django 和 MongoDB 来实现我的后端.现在，请以最好的方式帮助我，如果它可以在js中使用js在前端中实现，那对我将非常有帮助，或者如果它在后端中使用动态方法来实现，那么它也将起作用.
Now my problem is how can I implement the functionality of Add row button, Delete last row button, and the 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. 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.
推荐答案
如果要执行添加和删除之类的操作，则可以动态创建表.
You can create your table dynamically, if you want to do operations like add and delete.
您可以在此处查看演示: https://jsbin.com/pewexibole/edit?html,js,console，输出
You can check out the demo here: 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++;
}
这篇关于在输入表中添加或删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
