编辑HTML表的源数据
Edit source data of HTML table
我写了这部分代码:
<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
按钮(用鼠标光标指向它之后)
这是完成这项任务的好方法吗?或者我该怎么做?如果有任何建议,我将不胜感激。
对于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);
这是一个很好的方法,只需在表单中多做一件事,在编辑单行时为每个字段输入隐藏元素,然后用新条目更新隐藏元素,最后提交包含所有条目的表单,并在服务器端捕获数据并转换为json并保存为
相关文章:
- 如何将json数据显示为html
- 使用html中的外部javascript进行数据验证
- 无法将数据从firebase获取到我的html页面
- JS验证ajax返回的html中的表单数据
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- 编辑HTML表的源数据
- PHP:显示sqlite数据库中的html格式数据,使用tinymce保存
- 在页面呈现之前更改HTML数据
- 如何放置'选择'基于angularJS中数据的html选项
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- AngularJS-需要在index.html页面中访问来自服务的数据
- AngularJS加载JSON数据,然后从中解析/加载HTML
- tu如何将id放在填充了json数据的html表td上
- 在HTML页面上显示node.js服务器中的数据
- 函数jquery.html()不提供数据属性集值
- 从远程站点获取数据 - HTML 表
- 如何保存和访问复选框数据 HTML
- 在下拉列表中显示保存的数据 - html 选择标签
- 避免使用jQuery显示的数据.html在页面重新加载后丢失
- 使用javascript根据元素的数据html将类附加到元素中