Question

我写了这部分代码：

<table class="table table-hover">
 <thead>
  <tr>
    <th>Status</th>
    <th>MPK</th>
    <th>Full Name</th>
    <th>Phone Number</th>
    <th>Project Start Date</th>
    <th>Project End Sales Date</th>
    <th>Project Installation Date</th>
    <th>Project End Date</th>
    <th>General Manager</th>
    <th>IT Project Manager</th>
    <th>Notes</th>
  </tr>
</thead>
<?php
$file = '/var/lib/jenkins/workspace/Update_JSON/terminarz.json';
$fp_terminarz = fopen($file, 'r');
$toecho = fread($fp_terminarz, filesize($file));
$data =  json_decode($toecho, true);
fclose($fp_terminarz);
foreach($data as $key=>$value){ ?>
<tbody>
  <tr>
    <td>Opening process</td>
    <td><?php echo $value["MPK"]; ?></td>
    <td><?php echo $value["Restaurant Name"]; ?></td>
    <td><?php echo $value["Phone Number"]; ?></td>
    <td><?php echo $value["Project Start Date"]; ?></td>
    <td><?php echo $value["Project End Sales Date"]; ?></td>
    <td><?php echo $value["Project Installation Date"]; ?></td>
    <td><?php echo $value["Project End Date"]; ?></td>
    <td><?php echo $value["Restaurant Manager"]; ?></td>
    <td><?php echo $value["IT Project Manager"]; ?></td>
    <td><?php echo $value["Notes"]; ?></td>
  </tr>
<?php } ?>
</tbody>
</table>

我使用PHP脚本在HTML表格中显示JSON内容我的问题是 - 我希望有可能编辑任何行（一次一个）并保存更改后更新文件terminarz.json。
做这个的最好方式是什么？我正在考虑js脚本，这将改变行的css样式并在行附近显示Edit按钮（在用鼠标光标指向它之后）。
这是完成这项任务的好方法吗？或者我该怎么做？我很感激任何建议。

Answer 1

这是一个很好的方法只是在表单中再做一次包装表，并在编辑单行时为每个字段创建输入隐藏元素，然后用新条目更新该隐藏元素，最后提交包含所有条目的表单在服务器端捕获该数据并转换为json并保存它

Answer 2

对于UI / UX部分：

为什么在表格的最后一列中没有编辑图标，列标题为Edit。

隐藏输入字段，其中包含预填充的正确名称和值。

单击编辑图标，只需隐藏数据并显示输入字段，即用户可以编辑数据。此外，切换编辑图标以保存，并提供取消选项。

像这样：http://nathancahill.github.io/table-edits/

更新数据：

$jsonString = file_get_contents('terminarz.json');
$data = json_decode($jsonString, true);

foreach ($data as $key => $entry) {
    if ($entry['id'] == $updated_row_id) {
        $data[$key]['name'] = "value";
    }
}

然后使用以下方法将其保存：

$newJsonString = json_encode($data);
file_put_contents('terminarz.json', $newJsonString);

编辑HTML表的源数据

2 个答案: