jquery - 用jquery用ID替换表中的特定数据
问题描述
- 在我的 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) -> 在表 (1) 中找到具有此 ID 的行 -> 并更新 project_id 和 t_title 单元格。
我将如何实施它?
解决方案
你有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");
},
...
那应该行得通。
推荐阅读
- ios - 如何从主 ViewController 访问自定义 UITableViewCell
- c# - C# .net:将图像添加到列表并显示在表单上
- visual-studio - 将多个自动化结果报告合二为一
- javascript - 如何在 TypeScript 中编写有效的 JS 表达式 [...Array(5).keys()] 而不会出错?
- android - 中心为椭圆形的LinearLayout
- python - 无法写入 xslx 文件,它说有一个属性错误
- java - 转换期间Java中的解析错误
- firebase - 获取父 uid 数据
- node.js - ffmpeg 安装在现有的 Node.js docker 镜像中
- node.js - 无法以角度创建新项目