点击表格行编辑按钮时，如何在可折叠侧边栏表单填充数据？

没问题，我来帮你搞定这个需求！要实现点击表格里的操作按钮，把对应行的数据填充到侧边栏表单并展开侧边栏的功能，咱们可以分几步来操作，主要依赖JavaScript处理数据传递和界面交互，同时调整你的PHP/HTML代码来标记数据：

核心思路 #

1. 给表格每行绑定对应的数据标识，方便点击按钮时快速获取该行数据
2. 编写JavaScript监听按钮点击事件，将数据填充到侧边栏表单并显示侧边栏
3. 处理侧边栏的关闭逻辑，同时清空表单数据

修改后的完整代码 #

<?php 
require_once 'authentication/auth.php'; 
authHTML(); 
require_once "configs/config.php"; 
$session_username = $_SESSION["username"]; 
$query = "SELECT username, ticket_title, ticket_category, ticket_status FROM tickets_file "; 
$result1 = mysqli_query($link, $query); 
?>
<!-- Data list view starts -->
<section id="data-list-view" class="data-list-view-header">
<!-- DataTable starts -->
<div class="table-responsive">
<table class="table data-list-view">
<thead>
<tr>
<th></th>
<th>USER NAME</th>
<th>TITLE</th>
<th>CATEGORY</th>
<th>STATUS</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<?php while($row1 = mysqli_fetch_array($result1)):;?>
<!-- 给表格行添加data属性存储该行所有字段值，用htmlspecialchars防止XSS -->
<tr data-username="<?php echo htmlspecialchars($row1[0]); ?>" 
    data-title="<?php echo htmlspecialchars($row1[1]); ?>" 
    data-category="<?php echo htmlspecialchars($row1[2]); ?>" 
    data-status="<?php echo htmlspecialchars($row1[3]); ?>">
<td></td>
<td class="product-name"><?php echo $row1[0];?></td>
<td class="product-category">
<div class="chip chip-warning">
<div class="chip-body">
<div class="chip-text"><?php echo $row1[1];?></div>
</div>
</div></td>
<td class="product-category"><?php echo $row1[2];?></td>
<td class="product-name"><?php echo $row1[3];?></td>
<td class="product-action">
<!-- 给编辑按钮添加专属类名，方便JS选择 -->
<span class="action-edit edit-btn"><i class="feather icon-eye"></i></span>
</td>
</tr>
<?php endwhile;?>
</tbody>
</table>
</div>
<!-- DataTable ends -->
<!-- add new sidebar starts -->
<!-- 初始隐藏侧边栏，添加hidden类 -->
<div class="add-new-data-sidebar hidden">
<div class="overlay-bg"></div>
<div class="add-new-data">
<div class="div mt-2 px-2 d-flex new-data-title justify-content-between">
<div>
<h4 class="text-uppercase">Edit Ticket Data</h4>
</div>
<div class="hide-data-sidebar close-btn">
<i class="feather icon-x"></i>
</div>
</div>
<div class="data-items pb-3">
<div class="data-fields px-2 mt-3">
<div class="row">
<div class="col-sm-12 data-field-col">
<label for="data-username">User Name</label>
<input type="text" class="form-control" id="data-username">
</div>
<div class="col-sm-12 data-field-col">
<label for="data-title">Ticket Title</label>
<input type="text" class="form-control" id="data-title">
</div>
<div class="col-sm-12 data-field-col">
<label for="data-category">Ticket Category</label>
<select class="form-control" id="data-category">
<option>Audio</option>
<option>Computers</option>
<option>Fitness</option>
<option>Appliance</option>
<!-- 可以根据数据库中的分类动态生成选项 -->
</select>
</div>
<div class="col-sm-12 data-field-col">
<label for="data-status">Ticket Status</label>
<select class="form-control" id="data-status">
<option>Pending</option>
<option>Canceled</option>
<option>Delivered</option>
<option>On Hold</option>
<!-- 可以根据数据库中的状态动态生成选项 -->
</select>
</div>
<div class="col-sm-12 data-field-col">
<label for="data-price">Price</label>
<input type="text" class="form-control" id="data-price">
</div>
<div class="col-sm-12 data-field-col data-list-upload">
<form action="#" class="dropzone dropzone-area" id="dataListUpload">
<div class="dz-message">Upload Image</div>
</form>
</div>
</div>
</div>
</div>
<div class="add-data-footer d-flex justify-content-around px-3 mt-2">
<div class="add-data-btn">
<button class="btn btn-primary">Update Data</button>
</div>
<div class="cancel-data-btn close-btn">
<button class="btn btn-outline-danger">Cancel</button>
</div>
</div>
</div>
</div>
<!-- add new sidebar ends -->
</section>
<!-- Data list view end -->
</div>
</div>
</div>
<!-- END: Content-->
<div class="sidenav-overlay"></div>
<div class="drag-target"></div>

<!-- 控制侧边栏显示隐藏的基础样式 -->
<style>
.add-new-data-sidebar.hidden {
    display: none;
}
/* 如果你的侧边栏原有过渡动画，保留原有样式即可 */
</style>

<!-- 核心交互逻辑 -->
<script>
// 获取所有编辑按钮、侧边栏、关闭按钮和遮罩层
const editBtns = document.querySelectorAll('.edit-btn');
const sidebar = document.querySelector('.add-new-data-sidebar');
const closeBtns = document.querySelectorAll('.close-btn');
const overlay = document.querySelector('.overlay-bg');

// 绑定编辑按钮点击事件
editBtns.forEach(btn => {
    btn.addEventListener('click', function() {
        // 获取当前按钮所在的表格行
        const row = this.closest('tr');
        // 从行的data属性中提取数据
        const rowData = {
            username: row.dataset.username,
            title: row.dataset.title,
            category: row.dataset.category,
            status: row.dataset.status
        };
        
        // 将数据填充到侧边栏表单
        document.getElementById('data-username').value = rowData.username;
        document.getElementById('data-title').value = rowData.title;
        document.getElementById('data-category').value = rowData.category;
        document.getElementById('data-status').value = rowData.status;
        
        // 显示侧边栏
        sidebar.classList.remove('hidden');
    });
});

// 绑定所有关闭按钮的点击事件
const closeSidebar = () => {
    sidebar.classList.add('hidden');
    // 清空表单数据
    document.getElementById('data-username').value = '';
    document.getElementById('data-title').value = '';
    document.getElementById('data-category').selectedIndex = 0;
    document.getElementById('data-status').selectedIndex = 0;
};

closeBtns.forEach(btn => btn.addEventListener('click', closeSidebar));
overlay.addEventListener('click', closeSidebar);
</script>

关键说明 #

1. 数据绑定：给每个表格行添加data-*属性存储对应字段值，使用htmlspecialchars()避免XSS攻击
2. 表单匹配：调整了侧边栏表单的字段，使其和表格中的工单数据一一对应
3. 交互逻辑：
   • 点击编辑按钮时，从父级表格行提取数据并填充到表单
   • 显示侧边栏，同时支持点击关闭按钮、取消按钮、遮罩层三种方式关闭侧边栏
   • 关闭侧边栏时自动清空表单数据，避免残留旧数据

内容的提问来源于stack exchange，提问作者surhya narayan