0

I have written a table in html and made its rows contenteditable if user hits the edit button. this table's data are coming from an mysql database. I want my user to be able to change the content editable fields and after hitting the save button changes send to mysql table again. so firstly, i want to know how to save content editable changes in a string variable so i can be able to POST them to database. followings are my related codes:

<?php
 $servername = "localhost";
 $username   = "hevak_neshat";
 $password   = "shir moz peste";
 $dbname     = "hevak_android_api";
 // Create connection
 $conn = new mysqli($servername, $username, $password, $dbname);
 // Check connection
 if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
 }
 $sql    = "SELECT * FROM beacons";
 $result = $conn->query($sql);
 if ($result->num_rows > 0) {
     echo "<thead>
            <tr>
                <th>Major number</th>
                <th>Minor number</th>
                <th>Client</th>
                <th>Location</th>
                <th>Link to ad</th>
                <th>Attachment</th>
                <th>Edit</th>
            </tr> 
        </thead>";
     echo "<tbody>";

     while ($row = $result->fetch_assoc()) {
         echo "<tr><td>" . $row["major"] . "</td><td>" . $row["minor"] . "</td><td>" . $row["client"] . "</td><td>" . $row["geolocation"] . "</td><td>" . $row["linktoadd"] . "</td><td>" . $row["attacment"] . "</td><td>";
         echo "<button class=\"editbtn\">Edit</button>";
         echo "<td><button class=\"savebtn\">Save</button></td>";
         echo "</td>";
         echo "</tr>";
     }
     echo "</tbody></table>";
 } else {
     echo "no results";
 }
 ?>

And my Javascript:

$(document).on("click", ".editbtn", function (event) {
    event.preventDefault();
    alert("click on items to edit");
    var currentTD = $(this).parents('tr').find('td');
    if ($(this).html() == 'Edit') {
        $.each(currentTD, function () {
            $(this).prop('contenteditable', true)
        });
    } else {
        $.each(currentTD, function () {
            $(this).prop('contenteditable', false)
        });
    }
});

Update: in my code i used content editable. but if anyone has any idea of moving user changes in a table to a database please tell me, even if it is a whole other way. just a table with ability to edit content and moving the content to db.

mina
  • 71
  • 8
  • you would need to add event to elements editable and assign the values in hidden variables resp which you could fetch on server side. Refer this on how to attach event / event listener. See support for such events for browsers as well. http://stackoverflow.com/questions/1391278/contenteditable-change-events – pratikpawar Dec 30 '15 at 05:48
  • @pratikwebdev i saw that, do you know a better way for doing this? not necessarily using contenteditable, anyway for moving changes from table to a database? – mina Dec 30 '15 at 08:07
  • not necessarily using contenteditable? then just output input fields in and wrap your table with form, then submit the entire form when you click "save" button. – Phoenix Dec 30 '15 at 08:20
  • @mina create a form containing table with input fields in `` with unique names. On backend you could fetch values from request. Table is just to hold the layout of form in this case. – pratikpawar Dec 30 '15 at 10:31

0 Answers0