如何使用 Jquery 隐藏表格的整行答案

【问题标题】：How to hide full row of the table using Jquery如何使用 Jquery 隐藏表格的整行
【发布时间】：2021-08-23 06:15:16
【问题描述】：

我正在构建系统，其中有一个带有锚标记名称原始的表，并在每一行中复制。单击这些锚标记，我们可以将项目更新到数据库中，无论该项目是原始的还是使用 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);
  }
});

});

【问题讨论】：

你可以在你的ajax成功函数里面试试：$("a[data-id="+id+"]").closest("tr").hide()。

标签： javascript html jquery ajax laravel-8

【解决方案1】：

在事件处理程序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()
    }
  });

});

【讨论】：