用jquery用ID替换表中的特定数据答案

【问题标题】：Replace specific data in table by ID with jquery用jquery用ID替换表中的特定数据
【发布时间】：2020-08-23 05:22:36
【问题描述】：

在我的 Laravel 项目中，我有一个表，应该更新数据而不用 jquery 在特定行中重新加载页面。必须在行中更新数据：

....
  <tbody>
  @foreach ($tasks as $task)
    <tr>
      <td>{{$task->id}}</th>
      <td>{{$task->project_id}}</td>
      <td>{{$task->t_title}}</td>
      <td>
      <a href="#" class="editbtn btn btn-success ">EDIT </a>
      <a class="btn btn-success">DELETE </a> </td>
      </tr>
  @endforeach

从那里获取数据以编辑弹出表单：

<form id="editFormID">
 <div class="modal-body">   
  @CSRF
  {{method_field('PUT')}}
  <input type="hidden"  name="id" id="id">
  <div class="form-group">
    <label>Project ID</label>
    <input type="text" name="project_id" id="project_id" class="form-control">
  </div>
  <div class="form-group">
    <label>Title</label>
    <input type="text" name="t_title" id="t_title" class="form-control"  > ...

jquery 从 1 到 2 获取数据：

$(document).ready(function () {
  $('.editbtn').on('click', function() {
    $('#studenteditmodal').modal('show');

$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
  return $(this).text();
}).get();
console.log(data);
$('#id').val(data[0]);
$('#project_id').val(data[1]);
$('#t_title').val(data[2]);
 });

$('#editFormID').on('submit', function(e) {
  e.preventDefault();
  var id= $('#id').val();
  $.ajax({
    type: "PUT",
    url: "/studentupdate/"+id,
    data: $('#editFormID').serialize(),
    success: function(response) {
      console.log(response);
      $('#studentEditModal').modal('hide');
      alert("Data Updated");
    },
    error: function(error) {
      console.log(error);
    }
  });
 });
});

提交后 jquery 更新数据库中的数据而无需重新加载页面，但是要在表中看到它我需要重新加载页面。

我想在不重新加载的情况下查看表中的数据。这个想法可能是：

提交后 -> 从编辑表单中获取 ID (2) -> 在表中找到具有此 ID 的行 (1) -> 并更新 project_id 和 t_title 单元格。

我将如何实现它？

【问题讨论】：

您可以编写另一个函数来获取记录并更新表格，也可以在响应成功后更新表格中输入的值。

标签： jquery ajax laravel bootstrap-modal laravel-blade

【解决方案1】：

这里有 2 个选项

一个困难的（和理想的）：
- 在您的 Laravel 应用程序中编写一个 API，以通过 ID 获取记录并更新表中的记录。
一个简单的：
- 只需通过更新的字段值更新表中的记录。

以下是简单方法所需的更改：

<tbody>
  @foreach ($tasks as $task)
    <tr id="TaskNo{{ $task->id }}">
      <td class="id">{{$task->id}}</th>
      <td class="project_id">{{$task->project_id}}</td>
      <td class="t_title">{{$task->t_title}}</td>
      <td>
      <a href="#" class="editbtn btn btn-success ">EDIT </a>
      <a class="btn btn-success">DELETE </a> </td>
      </tr>
  @endforeach

在父标签中添加 ID 以识别唯一行。

在 Jquery 中更新行

...
success: function(response) {
    console.log(response);
    $('#studentEditModal').modal('hide');
    $('#TaskNo'+ id +' .id').html($('#id').val());
    $('#TaskNo'+ id +' .project_id').html($('#project_id').val());
    $('#TaskNo'+ id +' .t_title').html($('#t_title').val());
    alert("Data Updated");
},
...

应该可以的。

【讨论】：