表格行添加编辑删除操作和保存数据代码数据从数据库中获取

时间: 2024-02-22 09:55:02 浏览: 83

Layui表格行添加编辑删除操作和保存数据代码

5星 · 资源好评率100%

在IT行业中，前端开发经常会遇到需要对表格数据进行动态操作的需求，例如添加、编辑、删除以及保存等。Layui是一个流行的JavaScript框架，它提供了丰富的组件和API，使得这些操作变得简单易行。本示例将详细介绍如何使用Layui实现表格行的添加、编辑、删除操作，并且在编辑后如何保存数据。我们需要了解Layui的table模块。Layui的table组件可以轻松创建各种复杂的表格，并提供多种自定义选项。在"index.html"文件中，我们通常会引入layui的CSS和JS文件，并初始化表格。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <table id="demo"></table> <script src="layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //表格渲染数据 table.render({ elem: '#demo' ,url: 'data.json' //模拟接口 ,cols: [[ //标题栏 {field: 'id', title: 'ID', width: 80} ,{field: 'name', title: '姓名'} ,{field: 'age', title: '年龄', width: 80} ,{title: '操作', width: 200, align: 'center', toolbar: '#barDemo'} ]] }); }); </script> </body> </html> ``` 这里，我们使用`table.render()`方法渲染表格，指定元素ID（#demo）、数据源URL（data.json）和列配置。接下来，我们要实现添加功能。Layui的table组件提供了`table.append()`方法来添加新行。通常，我们会在一个按钮的点击事件中调用这个方法： ```javascript layui.use(['form', 'table'], function(){ var form = layui.form ,table = layui.table; //添加按钮点击事件 $('#addBtn').on('click', function(){ table.append({ data: [{id: '', name: '', age: ''}] ,done: function(){ // 添加完成后执行的操作，如重新调整行号等 } }); }); }); ``` 编辑功能可以通过开启行内编辑实现，一般结合Layui的form模块。当用户点击某行时，我们可以隐藏其他列，显示输入框，让用户编辑。例如： ```javascript // 行点击事件 table.on('row(demo)', function(obj){ var data = obj.data; //获取当前行数据 var tr = obj.tr; //获取当前行 tr 对象 // 编辑按钮点击事件 $('#editBtn').on('click', function(){ $(tr).find('.layui-table-cell').each(function(i, cell){ if($(cell).attr('lay-field') !== '操作'){ $(cell).html('<input type="text" class="layui-input" value="' + $(cell).text() + '"/>'); } }); }); }); ``` 删除操作可以使用`table.remove()`方法，通过传入表格ID和行数据的主键来移除特定行。例如： ```javascript // 删除按钮点击事件 $('#deleteBtn').on('click', function(){ var dataId = $(this).attr('data-id'); // 获取要删除行的ID table.remove('demo', {id: dataId}); // 删除操作 }); ``` 保存编辑的数据需要监听表单的提交事件，然后通过Ajax将更新后的数据发送到服务器。在这个例子中，我们可以使用`layui.form`的submit事件： ```javascript form.on('submit(saveData)', function(data){ var field = data.field; //获取所有input的值，即表单数据 // 使用Ajax发送更新数据到服务器 $.ajax({ url: 'saveData.php', type: 'POST', data: field, success: function(res){ if(res.success){ //假设返回成功状态 layer.msg('保存成功'); // 可以选择性地重新加载表格数据或刷新页面 } else { layer.msg('保存失败，请稍后再试'); } }, error: function(){ layer.msg('网络错误，请重试'); } }); return false; //阻止表单跳转 }); ``` 在"layui"目录中，可能包含了layui库的所有文件，包括CSS、JS以及图标等资源。这个示例主要使用了layui的table和form模块，实现了表格的动态操作和数据保存。实际项目中，你需要根据具体需求对代码进行适当的调整，例如处理数据源、错误处理等。

要在表格中添加编辑和删除操作，并将更改保存回数据库中，可以使用 PHP 和 MySQL 来实现。可以按照以下步骤： 1. 在 HTML 文件中创建一个表格，为每一行添加编辑和删除按钮，添加单击事件监听器，当按钮被点击时，调用一个 JavaScript 函数。 2. 创建一个 JavaScript 函数，当该函数被调用时，它将获取要编辑或删除的行的数据，并将其传递给一个 PHP 脚本。 3. 创建一个 PHP 脚本，该脚本将接收从 JavaScript 函数传递的数据，将其保存到数据库中，然后将结果返回给 JavaScript 函数。以下是示例代码： HTML 文件： ``` <!DOCTYPE html> <html> <body> <table id="myTable"> <tr> <th>学生姓名</th> <th>学号</th> <th>年龄</th> <th>编辑</th> <th>删除</th> </tr> <?php // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "mydb"); // 查询数据 $result = mysqli_query($conn, "SELECT * FROM students"); // 遍历结果集，输出表格 while ($row = mysqli_fetch_assoc($result)) { echo "<tr>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['id'] . "</td>"; echo "<td>" . $row['age'] . "</td>"; echo "<td><button onclick=\"editRow(" . $row['id'] . ")\">编辑</button></td>"; echo "<td><button onclick=\"deleteRow(" . $row['id'] . ")\">删除</button></td>"; echo "</tr>"; } // 关闭数据库连接 mysqli_close($conn); ?> </table> <script> function editRow(id) { // 获取要编辑的行的数据 var name = prompt("请输入学生姓名："); var age = prompt("请输入学生年龄："); // 将数据传递给 PHP 脚本 var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // 处理 PHP 脚本返回的结果 alert(this.responseText); } }; xhttp.open("POST", "edit.php", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("id=" + id + "&name=" + name + "&age=" + age); } function deleteRow(id) { if (confirm("确定要删除该学生吗？")) { // 将数据传递给 PHP 脚本 var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // 处理 PHP 脚本返回的结果 alert(this.responseText); } }; xhttp.open("POST", "delete.php", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("id=" + id); } } </script> </body> </html> ``` PHP 文件（edit.php）： ``` <?php // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "mydb"); // 获取要更新的数据 $id = $_POST['id']; $name = $_POST['name']; $age = $_POST['age']; // 更新数据 $sql = "UPDATE students SET name='$name', age=$age WHERE id=$id"; if (mysqli_query($conn, $sql)) { echo "更新成功"; } else { echo "更新失败：" . mysqli_error($conn); } // 关闭数据库连接 mysqli_close($conn); ?> ``` PHP 文件（delete.php）： ``` <?php // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "mydb"); // 获取要删除的数据 $id = $_POST['id']; // 删除数据 $sql = "DELETE FROM students WHERE id=$id"; if (mysqli_query($conn, $sql)) { echo "删除成功"; } else { echo "删除失败：" . mysqli_error($conn); } // 关闭数据库连接 mysqli_close($conn); ?> ``` 在这个示例中，我们使用了 prompt() 函数来获取用户输入的数据，实际上应该使用 HTML 表单来收集数据。此外，我们还省略了一些错误处理和安全性检查，实际上应该对输入数据进行验证和过滤，以避免 SQL 注入等安全问题。

阅读全文

表格行添加编辑删除操作和保存数据代码 数据从数据库中获取

相关推荐

数据库添加、删除、编辑等操作

Layui表格行添加编辑删除操作和保存数据代码.zip

javascript动态添加表格数据行(ASP后台数据库保存例子)

Layui表格添加行删除保存代码.zip

python fastapi,将一个SQLITE数据的表单内容全部显示在html网页上，并可以编辑表格内容，删除数据行，增加数据行，点击保存，保存这些数据到数据库，含CSS和html

数据控件DataGridView添加、删除和修改数据库中的内容.pdf

动态添加/删除表格行并提交内容到后台

使用DataGrid和数据控件访问Access数据库

Excel从SQLServer获取数据-SQLServer代码类资源

jQuery easyui datagird编辑行删除行功能的实现代码

利用MFC ODBC操作Access数据库实现显示、添加、修改、删除等功能

Visual Basic 编辑窗体：数据库管理与操作

电子表格数据输入和编辑

Swing表格组件：实现数据的表格展示和编辑

Dart中的数据持久化：使用SQFlite进行本地数据库操作

Python操作Excel表格中的数据管理与协作：构建高效团队数据管理系统，打破数据孤岛

IntelliJ IDEA数据库工具：集成与数据操作技巧

Python库文件的数据持久化：存储策略、数据库交互和文件操作

最新推荐

JS实现动态生成表格并提交表格数据向后端

利用MFC ODBC操作Access数据库实现显示、添加、修改、删除等功能

Delphi用ADO操作数据库完整示例

C#2005实现数据表的基本操作

java基础GUI框架完成的贪吃蛇小游戏.zip

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能

表格行添加编辑删除操作和保存数据代码数据从数据库中获取