更改行值onclick html表，如phpMyAdmin

Question

I'm basically trying to use a simple method of editing table stored inside a mySQL database, but don't want to go through a different editing page, so my theory is :

Show all data inside a HTML table as usual would as followed.

<table class="table table-bordered sortable">
<thead>
        <tr>
                <th>Marchant</th>
                <th>URL</th>
                <th>Status</th>
                <th>Sold</th>
                <th>Deals</th>
                <th>Sites</th>
                <th>Found</th>
                <th>Seen</th>
        </tr>
</thead>

<tbody>
        <tr>
                <td>value</td>
                <td></td>
                <td></td>
                <td>Sold here</td>
                <td>Deals here</td>
                <td>Sites here</td>
                <td>null</td>
                <td>null</td>
        </tr>
</tbody>

I want to be able to edit the data on the fly, simply by clicking on the value displayed and changing it.

The question is how would i go about by doing this, is it even possible ?

Answer 1

Yes, its possible.

It's mostly frontend.

Here is example of creating input after you click on a cell. (jQuery)

// once page is loaded
$(document).ready(function() {

    // adding an event when the user clicks on <td>
    $('td').click(function() {

        // create input for editing
        var editarea = document.createElement('input');
        editarea.setAttribute('type', 'text');

        // put current value in it
        editarea.setAttribute('value', $(this).html());

        // rewrite current value with edit area
        $(this).html(editarea);

        // set focus to newly created input
        $(editarea).focus();

    });

});

After this you can add event to newly created input. (for example when user hits Enter)

Then you do AJAX request and send new values to a .php script.

You also need to add id to a newly created element so you know exactly what cell is needed to be changed after data is sent via AJAX.

Also, don't forget to validate data before putting to MySQL.

So if everything went good or not you return value back, and according to the value you write JavaScript code to to remove element from a cell / put edited value or popup a message.

Hope this helps.