javascript - 如何使用 Jquery 隐藏表格的整行
问题描述
我正在构建系统,其中有一个带有锚标记名称原始的表,并在每一行中复制。单击这些锚标记,我们可以将项目更新到数据库中,无论该项目是原始的还是使用 ajax 的副本。但是在单击其中一个锚标记后,我无法隐藏整行。我正在使用 Laravel-8 在后端进行开发。我的观点
<div class='container' style="margin-top:50px">
<div class="row">
<div class="input-group" style="margin:20px">
<form >
<table style="float:right">
<th>
<div class="form-outline">
<input type="search" id="form1" class="form-control" placeholder="Search" /></th>
<th><button type="button" class="btn btn-success" >
<i class="fas fa-search"></i>
</button></th>
</form>
</div>
<div class="table-responsive">
<table class="table custom-table">
<thead>
<tr>
<th scope="col">
<label class="control control--checkbox">
<input type="checkbox" class="js-check-all"/>
<div class="control__indicator"></div>
</label>
</th>
<th scope="col" >S.N</th>
<th scope="col">LC NO</th>
<th scope="col">Applicant</th>
<th scope="col">Doc Value</th>
<th scope="col">Doc Received date</th>
<th scope="col">LC Type</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php $number = 1;?>
@foreach($datas as $items)
<tr>
<th scope="row" style="padding:20px">
<label class="control control--checkbox">
<input type="checkbox"/>
<div class="control__indicator"></div>
</label>
</th>
<td>{{$number}}</td>
<td>{{$items->lc_no}}</td>
<td>{{$items->applicant}}</td>
<td>{{$items->doc_value}}</td>
<td>{{$items->rec_date}}</td>
<td>{{$items->sight_usance}}</td>
<td><a href="#" data-id="{{$items->id}}" class="original">Original</a></td>
<td><a href="#" data-id="{{$items->id}}" class="copy">Copy</a></td>
</tr>
<?php $number++; ?>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
这是我的 jquery ajax 函数
$(".original").on('click', function(){
var id=$(this).attr('data-id');
$.ajax
({
type: "GET",
url: "orgupdate/"+id,
success: function(response)
{
alert(response);
}
});
});
解决方案
在事件处理程序this
中是发生事件的元素。从该元素用于closest()
获取行的引用。
$(".original").on('click', function() {
// reference closest row
var $row = $(this).closest('tr')
var id = $(this).attr('data-id');
$.ajax({
type: "GET",
url: "orgupdate/" + id,
success: function(response) {
alert(response);
// after verify response value remove the row
$row.remove()
}
});
});
推荐阅读
- react-native - 滑动到下一个屏幕(无限)
- php - 如何在 php 中的 html 标记内回显?
- android - 中心操作栏标题 - Android
- python - 限制生成的圆圈数量
- amazon-web-services - 与 tls 1.2 握手后 aws s3 cpp sdk finning 与 minio 的连接
- time-complexity - 你能解释一下为什么这个时间复杂度是 nlog(n)
- python - 使用逗号分隔的输入作为参数
- arrays - 获取二维数组中的多个元素,形状为 (*array)[column]
- c++ - C++ 高斯-赛德尔法
- javascript - 从数组 Typescript 派生类型