在 Laravel 中使用 jQuery 向数据表中添加行可以通过以下步骤实现:
<!-- resources/views/table.blade.php -->
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@endforeach
</tbody>
</table>
<button id="addRow">Add Row</button>
// app/Http/Controllers/TableController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class TableController extends Controller
{
public function addRow(Request $request)
{
$user = new User;
$user->name = $request->input('name');
$user->email = $request->input('email');
$user->save();
return response()->json(['success' => true]);
}
}
// routes/web.php
use App\Http\Controllers\TableController;
Route::post('/add-row', [TableController::class, 'addRow'])->name('addRow');
// public/js/custom.js
$(document).ready(function() {
$('#addRow').click(function() {
var name = prompt('Enter name:');
var email = prompt('Enter email:');
$.ajax({
url: '{{ route("addRow") }}',
method: 'POST',
data: {
name: name,
email: email,
_token: '{{ csrf_token() }}'
},
success: function(response) {
if (response.success) {
var newRow = '<tr><td>' + name + '</td><td>' + email + '</td></tr>';
$('#myTable tbody').append(newRow);
}
}
});
});
});
以上代码中,我们使用了 jQuery 的 click
事件来监听按钮的点击。当按钮被点击时,会弹出两个输入框要求用户输入姓名和电子邮件。然后,通过 AJAX 请求将这些数据发送到 addRow
路由中。在控制器中,我们将数据保存到数据库中,并返回一个 JSON 响应表示成功。在 JavaScript 中,我们根据响应的成功状态来动态添加新的行到表格中。
这是一个基本的示例,你可以根据自己的需求进行修改和扩展。在 Laravel 中,你可以使用 Eloquent ORM 来处理数据库操作,以及使用 Blade 模板引擎来渲染视图。此外,你还可以使用 Laravel Mix 来编译和管理前端资源。
推荐的腾讯云相关产品:腾讯云服务器(CVM)、腾讯云数据库(TencentDB)、腾讯云对象存储(COS)、腾讯云云函数(SCF)等。你可以访问腾讯云官网了解更多关于这些产品的详细信息和使用指南。
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云