(solved)Javascript and HTML5 scheme for inplace, inline editing of records

Video Explanation with a Working Example
(code given after this video)

Please watch the following youtube video:

We shall create an html table with a few rows of data. Each row will have two td columns - the first column will be for the edit link button and the second will be for displaying some text, say, a person's name.

When a user clicks the edit link, the entire record will enter data-editing mode. The contents of its cells will change - the edit link will get replaced by an update | cancel pair, and the second cell will turn into a textbox with the same data inside it.

Start by creating an html file by using any text editor, or by using any IDE like dreamweaver and give it any name, say, index.html, and type the following html into it - exactly as shown below. We suggest copy-pasting it.

<style type="text/css">

  table {
    width: 75%;
    margin: 4px auto;
    table-layout: fixed;
  }

  td {
    padding: 6px;
  }

</style>

<table border="1">

  <caption><h1>In-Place Edit Example</h1></caption>

  <tr>

    <th></th>

    <th>Name</th>

  </tr>

  <tr>

    <td>
      <a class="edit" href="javascript:">Edit</a>
    </td>

    <td>
      James
    </td>

  </tr>

  <tr>

    <td>
      <a class="edit" href="javascript:">Edit</a>
    </td>

    <td>
      Mary
    </td>

  </tr>

  <!-- the tr that contains edit mode controls -->
  <tr hidden id="boxes">

    <td>
      <a href="javascript:" id="aUpdate">Update</a>
      |
      <a href="javascript:" id="aCancel">Cancel</a>
    </td>

    <td>
      <input id="txt" name="txt" />
    </td>

  </tr>

</table>

// after this add or copy paste the code for  
// javascript as explained later in this article 

Explanation of the above code

style tag

The style tag contains rudimentary padding, etc., so that the page looks good.

table tag

The table contains tr tags of two td columns each. The first column contains an anchor tag with class="edit", which will be used to query for the collection of all such anchor tags, and run a for-each loop to bind them to a click event handler.

<tr hidden id="boxes">

This tr is the last tr tag, but it has been marked hidden. It contains all the input controls for the edit mode. As you can see that its first cell contains the Update/Cancel pair, whereas the second cell contains the input textbox.

The plan that we follow

The following steps take place when the user clicks an edit link:

1. When a user clicks an edit link, then javascript code is used to locate its containing tr.
2. After that the above tr is marked hidden.
3. the id="boxes" tr that contains the edit-mode controls is moved just above it, and made visible by using the insertAdjacentElement javascript function. In this way, the record enters its editing mode.
4. Lastly, the value attribute of the input text is set equal to the innerText of the td tag of the row being edited. This causes the current value to be shown as the text of the textboxes. The user can now modify it and click the update link.

The completed Javascript code

Following is the complete javascript that should be placed just after the table tag. Put it in the same htmle file.

The last part of the js code shows the click event handlers of the cancel and update links.

<!-- Place it just below the table above
    see the video at the end for clarity-->

<script type="text/javascript">

  (function () {

    // currently being edited tr row 
    let currentTR;

    // query all  "edit" anchors 
    document.querySelectorAll("a.edit").forEach(a => {

      // attach click event handler to each "edit" 
      a.addEventListener("click", function () {

        // cancel any pending edits 
        if (currentTR) {

          aCancel.click();

        }

        // find the parent tr of the clicked edit 
        currentTR = a.closest("tr");

        // insert the boxes along it 
        currentTR.insertAdjacentElement('beforebegin', boxes);

        // hide the tr 
        currentTR.hidden = true;

        // fill data into the inputs 
        txt.value = currentTR.cells[1].innerText.trim();

        // show the boxes 
        boxes.hidden = false;

      });

    });

    aCancel.addEventListener("click", function () {

      boxes.hidden = true;

      currentTR.hidden = false;

    });

    aUpdate.addEventListener("click", function () {

      // hide the input controls 
      boxes.hidden = true;

      // set the values of td 
      currentTR.cells[1].innerText = txt.value;

      // show the td 
      currentTR.hidden = false;
    });
  })();

</script>

About the Ajax Code

The ajax code for the actual updates will be written in the click event handler of the "aUpdate anchor" above. Typically, a javascript based fetch request is sent to the listening server. We haven't shown that code here because this article is about the html and javascript scheme. We will implement it in one of the ASP.NET Core tutorials later. You can refer this link for the concepts: (ASP.NET Core 5) Bare minimum code for a parameterized AJAX GET Request to a C# function