how to insert data from table columns of the given row only?

Question

I have a data table which looks like this

My table so far is

<table id="example1" class="table table-bordered table-striped">
    <thead>

        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>District</th>
            <th>VDC/MUNICIPAL</th>
            <th>Ward No.</th>
            <th>Camp Visited?</th>
            <th>Consense</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="persons : ${part}">
            <form method="post" th:action="@{/addReport}" enctype="multipart/form-data">
                <input type="hidden" value="th:text='${ persons.name}'">
                <td contenteditable='true' th:text="${persons.name}"></td>
                <td contenteditable='true' th:text="${persons.lastName}"></td>
                <td contenteditable='true' th:text="${persons.age}"></td>
                <td contenteditable='true' th:text="${persons.sex}"> </td>
                <td contenteditable='true' th:text="${persons.district}"></td>
                <td contenteditable='true' th:text="${persons.vdcMun}"></td>
                <td contenteditable='true' th:text="${persons.wardNo}"></td>
                <td>
                    <div class="checkbox">
                        <input type='hidden' value='no' name='attendStatus'>
                        <label>
                            <input type="checkbox" value="yes" name="attendStatus">
                        </label>
                    </div>
                </td>
                <td>
                    <div class="form-control">
                        <input type="hidden" name="file" value="null">
                        <input id="file" type="file" name="file" accept="image/*">
                    </div>
                </td>
                <td>
                    <button type="submit" class="btn btn-success">Submit</button>
                </td>
                <input type="hidden" th:value="${persons.id}" name="id">
            </form>
        </tr>
    </tbody>
</table>

I have used thymeleaf to iterate data throughout the columns and it is working fine. this table successfully saves the data but now I want to add edit feature. all the table columns are editable so whenever I click on one column I can edit it. the edited data should now be saved into my database. (I don't need help to save data i.e back-end). I want to pass value of edit column(td) if it is edited else pass just pass the value as it is.

How can I do so? any javascript code or ideas will be welcome.

did you try add some id? and save/update the row in your database — alias_boubou, Mar 23 '17 at 10:09
some lead: [onchange for table](http://stackoverflow.com/questions/34960759/onchange-event-of-table-td) — bhansa, Mar 23 '17 at 11:17

score 0 · Answer 1 · answered Mar 23 '17 at 10:11

In that case we used to have a hidden param as i see u have too . U just need to remember the value of unique Id that is auto generated in DB. Just map those values to each row , Use it as an identifier , When Editing happens U can send the Id back with the edited data so that you can identify which row to edit based on Id. Pardon me if misunderstood your questions.

how to insert data from table columns of the given row only?

1 Answers1