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">×</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();
?>
```
注意:以上代码仅为示例,可能存在安全隐患和性能问题,请根据实际情况进行修改和优化。