javascript - 使用 Jquery 添加和删除行表
问题描述
它几乎完成了,但我不知道为什么它不能按预期的方式工作。功能很简单,点击最后一行添加一行,左边一个按钮删除一行。
添加工作正常,也可以删除,但是当您删除最后一行时,您无法再次添加。你们能帮帮我吗?这是代码:
$(document).ready(function() {
//Add Button
$(".fa-plus").click(function() {
var idTable = $(this).closest('table').attr('id');
$('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');
//$('#' + idTable + ' tbody>tr:last #name').val('');
$(this).replaceWith('');
return false;
});
//Delete Butotn
$(".fa-trash").click(function() {
var idTable = $(this).closest('table').attr('id');
var rowCount = $('#' + idTable + ' tr').length;
if (rowCount > 2) {
// If is the last Row
if (!$(this).closest('tr').next().length) {
$(this).closest("tr").remove();
$('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");
} else {
$(this).closest("tr").remove();
}
} else {
alert('Dont delete the only row');
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">
<thead>
<tr>
<th style="width:46px;"></th>
<th></th>
<th style="width: 35%;"></th>
<th style="width:46px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>
<td><input class="form-control" /></td>
<td><input class="form-control" /></td>
<td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>
</tr>
</tbody>
</table>
解决方案
问题是当您删除该行时,您也删除了点击处理程序。所以而不是$(".fa-plus").click(function() {...
使用$('table').on("click", ".fa-plus", function() {...
.
$(document).ready(function() {
//Add Button
$('table').on("click", ".fa-plus", function() {
var idTable = $(this).closest('table').attr('id');
$('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');
//$('#' + idTable + ' tbody>tr:last #name').val('');
$(this).replaceWith('');
return false;
});
//Delete Butotn
$(".fa-trash").click(function() {
var idTable = $(this).closest('table').attr('id');
var rowCount = $('#' + idTable + ' tr').length;
if (rowCount > 2) {
// If is the last Row
if (!$(this).closest('tr').next().length) {
$(this).closest("tr").remove();
$('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");
} else {
$(this).closest("tr").remove();
}
} else {
alert('Dont delete the only row');
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">
<thead>
<tr>
<th style="width:46px;"></th>
<th></th>
<th style="width: 35%;"></th>
<th style="width:46px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>
<td><input class="form-control" /></td>
<td><input class="form-control" /></td>
<td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>
</tr>
</tbody>
</table>
推荐阅读
- php - Ubuntu 14.04 - PHP socket_create 不创建端口来监听
- kubernetes-helm - 根据 Helm(第一次)安装或升级有条件地设置值?
- laravel - 在 Laravel 中根据外键使列唯一
- python - 将 Python2 脚本移植到 Python3 - 结构库
- c++ - 在c ++中随机更改字符串中字母的位置
- c++ - 如何为更大的项目正确准备makefile?
- javascript - Reactjs:如何在父组件和子组件中访问子组件的引用?
- vba - VBA如何根据当前日期减去2天隐藏多个工作表
- java - 为什么 jUnit 测试必须公开?
- python - 按参数提示进行类型转换