javascript - 在输入表中添加或删除行
问题描述
我正在尝试设计一个带有输入表的网页,用户可以在其中根据需要添加或删除行。像这样的用户界面-
这是我的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 实现,那对我很有帮助,或者如果它应该用动态方法在后端实现它也可以。
解决方案
你的问题有很多部分,应该分成几个问题。这是删除行的简单方法。你会想要让按钮点击而不是我在这里所做的。而且,您还需要进行 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>
推荐阅读
- javascript - 枚举 Noesis Javascript.NET 中的所有全局对象
- sql - 很难理解 SQL 查询
- pyspark - 如何将 bigquery 表加载到 dataproc 集群
- javascript - 日期选择器和自定义显示格式
- javascript - SASS - 重置最后呈现的样式并重写样式
- android - 如果使用通过转换器的 2 路数据绑定,则不会生成 XML 布局的绑定实现
- apache-nifi - 如何在 Apache nifi 中配置 convertrecord 处理器,以便将 JSON 转换为 AVRO 格式
- c# - 在 C# 中获取组合框的值和键时出错
- python - pandas 中根据条件过滤某些数据行的解决方案
- css - 不继承 textarea 中某些字体设置的规范