php 操作一个html表格点击新增增加一行,之后弹窗选择要添加的数据,选择后关闭弹窗将数据加载到新增的哪一行之后可以移除这一页,表格的每一行可以向上向下拉排序

时间: 2023-12-10 10:39:34 浏览: 28
实现这个功能需要用到前端的JavaScript和后端的PHP。以下是一个实现的基本思路: 1. 在HTML中创建一个表格,并在表格的底部添加一个“新增”按钮。 2. 当用户点击“新增”按钮时,使用JavaScript动态向表格中添加一行。 3. 在新添加的行中添加一个“选择”按钮,当用户点击该按钮时,弹出一个模态框(可以使用Bootstrap的Modal组件)。 4. 在模态框中显示可选的数据,当用户选择一个数据时,关闭模态框并将数据加载到新添加的行中。 5. 在每一行的右侧添加“上移”和“下移”按钮,当用户点击这些按钮时,使用JavaScript实现行的排序。 6. 当用户完成所有操作并点击“保存”按钮时,使用AJAX将表格数据发送到PHP后端进行保存(可以使用MySQL数据库)。 下面是一个示例代码,可以作为参考: HTML代码: ```html <table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td> <button class="btn btn-sm btn-info" onclick="openModal(this)">选择</button> <button class="btn btn-sm btn-primary" onclick="moveUp(this)">上移</button> <button class="btn btn-sm btn-primary" onclick="moveDown(this)">下移</button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> <button class="btn btn-sm btn-success" onclick="addRow()">新增</button> <button class="btn btn-sm btn-primary" onclick="saveTable()">保存</button> </td> </tr> </tfoot> </table> <!-- 模态框 --> <div id="myModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">选择数据</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <ul id="dataList"> <li>数据1</li> <li>数据2</li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="selectData()">选择</button> </div> </div> </div> </div> ``` JavaScript代码: ```javascript // 新增一行 function addRow() { var table = document.getElementById("myTable"); var newRow = table.insertRow(-1); newRow.innerHTML = "<td></td><td></td><td><button class='btn btn-sm btn-info' onclick='openModal(this)'>选择</button> <button class='btn btn-sm btn-primary' onclick='moveUp(this)'>上移</button> <button class='btn btn-sm btn-primary' onclick='moveDown(this)'>下移</button></td>"; } // 打开模态框 function openModal(button) { var modal = document.getElementById("myModal"); modal.openButton = button; modal.show(); } // 选择数据 function selectData() { var modal = document.getElementById("myModal"); var selectedData = modal.querySelector("input[name='data']:checked").value; var row = modal.openButton.closest("tr"); row.cells[0].textContent = selectedData; modal.hide(); } // 上移一行 function moveUp(button) { var row = button.closest("tr"); if (row.previousElementSibling) { row.parentNode.insertBefore(row, row.previousElementSibling); } } // 下移一行 function moveDown(button) { var row = button.closest("tr"); if (row.nextElementSibling) { row.parentNode.insertBefore(row.nextElementSibling, row); } } // 保存表格数据 function saveTable() { var table = document.getElementById("myTable"); var data = []; for (var i = 1; i < table.rows.length - 1; i++) { var row = table.rows[i]; data.push({ column1: row.cells[0].textContent, column2: row.cells[1].textContent }); } // 使用AJAX将数据发送到后端进行保存 // ... } ``` PHP代码: ```php <?php // 连接数据库 $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 保存表格数据 $data = json_decode($_POST["data"]); foreach ($data as $row) { $sql = "INSERT INTO myTable (column1, column2) VALUES ('" . $conn->real_escape_string($row->column1) . "', '" . $conn->real_escape_string($row->column2) . "')"; if ($conn->query($sql) !== TRUE) { echo "保存失败: " . $conn->error; $conn->close(); exit; } } echo "保存成功"; $conn->close(); ?> ``` 注意:以上代码仅为示例,可能存在安全隐患和性能问题,请根据实际情况进行修改和优化。

相关推荐

最新推荐

recommend-type

使用PHP接收POST数据,解析json数据

复制代码 代码如下:&lt;...在这个文件中,首先得到html文件中POST表单域txt_json的值,放入变量$json_string中,而后判断,如果当前PHP的设定为magic_quotes_gpc=On,即传入的双引号等会被转义,这样jso
recommend-type

一列保存多个ID(将多个用逗号隔开的ID转换成用逗号隔开的名称)

在做项目时,经常会遇到这样的表结构在主表的中有一列保存的是用逗号隔开ID
recommend-type

php从数据库读取数据,并以json格式返回数据的方法

今天小编就为大家分享一篇php从数据库读取数据,并以json格式返回数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
recommend-type

php 接口与前端数据交互实现示例代码

最近在做前后端数据交互的尝试,也跳了很多坑,使用的是... 第一个表名:t_users 主键:user_id,自增长排列 php: &lt;?php //测试php是否可以拿到数据库中的数据 /*echo "44444";*/ //做个路由 action为url中
recommend-type

php接口数据加密、解密、验证签名

include_once(dirname(dirname(__FILE__)).DIRECTORY_SEPARATOR.’phpsec’.DIRECTORY_SEPARATOR.’Math’.DIRECTORY_SEPARATOR.’BigInteger.php’); include_once(dirname(dirname(__FILE__)).DIRECTORY_SEPARATOR...
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

用 Python 画一个可以动的爱心

好的,我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码: ```python import turtle import math # 设置画布和画笔 canvas = turtle.Screen() canvas.bgcolor("black") pencil = turtle.Turtle() pencil.speed(0) pencil.color("red", "pink") pencil.pensize(3) # 定义爱心函数 def draw_love(heart_size, x_offset=0, y_offset=0):
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。