Inline Record Edit Demo

This live demo modernizes the original inline student-record editor. The demo backend validates the data and returns JSON; it does not write to the production student table.

Delegated Edit Handler Top ↑

$( "#student-table" ).on(
    "click",
    ".edit-record",
    function () {
        const $button = $( this );
        const $row =
            $button.closest( "tr" );

        if (
            $button.text() === "Edit"
        ) {
            enterEditMode(
                $row,
                $button
            );
            return;
        }

        submitRow(
            $row,
            $button
        );
    }
);

Update with JSON Top ↑

$.post(
    "display-submit.php",
    data,
    null,
    "json"
)
.done(function ( response ) {
    if (
        response.value.status ===
        "success"
    ) {
        renderRow(
            $row,
            response.data
        );
    }
});

← Full record-edit tutorial

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: