JSFiddle - React, Tailwind, and code Playground

by Pevara

HTML

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Joe</td>
            <td>65</td>
        </tr>
         <tr>
            <td>2</td>
            <td>Averell</td>
            <td>45</td>
        </tr>
         <tr>
            <td>3</td>
            <td>Jim</td>
            <td>25</td>
        </tr>
         <tr>
            <td>4</td>
            <td>Jack</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

<button>save data</button>

JavaScript

// make td's editable
$('td').attr('contenteditable', true);

// converts the data from the table to a simple json object
function getTableAsJson() {
    var colmap = ['id', 'name', 'age'];
    var data = {};
    var countOuter = 0;
    // for each row
    $('tbody tr').each(function() {
        var countInner = 0;
        // for each cell
        $(this).find('td').each(function() {
            data[colmap[countInner] + countOuter] = $(this).text();
            countInner++;
        });
        countOuter++;
    });
    return data;
}

// clcik handler for the button that will send the data trough ajax
$('button').click(function() {
     $.ajax({
         type: "POST",
         url: 'url/to/my/serverside/script',
         data: getTableAsJson()
     });
});