CODEWITHSUNDEEP
javascriptphphtmlcssjson
DzikiChrzan
DzikiChrzan

Reputation: 3107

Edit source data of HTML table

I wrote this part of code:

<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>

I show JSON content in HTML table using PHP script.
My problem is - I want to have possibility to edit any row (one at a time) and after saving changes update file terminarz.json.
What is the best way to do this? I was thinking about js scripts, which would change css style of row and show Edit button near row (after pointing it with mouse cursor).
Is this good approach to this task? Or how should I do this? I would appreciate any advice.

Upvotes: 0

Views: 109

Answers (2)

Dangling Cruze
Dangling Cruze

Reputation: 3443

For the UI/UX part:

Why not have an edit icon in the last column of table with a column heading Edit.

Have hidden input fields with proper names and value pre-filled.

On click of the edit icon, simply hide the data and show the input fields, so the user can edit the data. Also, switch the edit icon to save and also give an option to cancel out.

Something like this: http://nathancahill.github.io/table-edits/

For updating the data:

$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";
    }
}

And then save it back using:

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

Upvotes: 1

quarksera
quarksera

Reputation: 101

Its a good approach just do one more thing wrap table in form and make input hidden element for each field when you edit a single row then update that hidden element with new entry and at last submit the form which contain all the entries and on server side catch that data and convert into json and save it

Upvotes: 1

Related Questions