javascript - get selected row through Edit button from html table

Question

I have populated an HTML table from the code behind. Now I like to edit a selected row. For this, I like to use javascript. So far which I have found, that works but without any button. It works by clicking any place of row. But I want only to click the Edit button, then the data will fill through Textbox. Anyway, my code below, please take a look and advice some code.

Thanks

My HTML

<div class="table-responsive">
            <table id="tableId">
              <thead>
                <tr>
                  <th>
                    <div class="media">
                      <div class="d-flex align-self-center">ID</div>

                      <div class="d-flex align-self-center ml-auto">
                        <span class="d-inline-block g-width-10 g-line-height-1 g-font-size-10">
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-up"></i>
                        </a>
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-down"></i>
                        </a>
                      </span>
                      </div>
                    </div>
                  </th>
                  <th>
                    <div class="media">
                      <div class="d-flex align-self-center">Name</div>

                      <div class="d-flex align-self-center ml-auto">
                        <span class="d-inline-block g-width-10 g-line-height-1 g-font-size-10">
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-up"></i>
                        </a>
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-down"></i>
                        </a>
                      </span>
                      </div>
                    </div>
                  </th>
                  <th>
                    <div class="media">
                      <div class="d-flex align-self-center">Pass</div>

                      <div class="d-flex align-self-center ml-auto">
                        <span class="d-inline-block g-width-10 g-line-height-1 g-font-size-10">
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-up"></i>
                        </a>
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-down"></i>
                        </a>
                      </span>
                      </div>
                    </div>
                  </th>
                  <th>
                    <div class="media">
                      <div class="d-flex align-self-center">Role</div>

                      <div class="d-flex align-self-center ml-auto">
                        <span class="d-inline-block g-width-10 g-line-height-1 g-font-size-10">
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-up"></i>
                        </a>
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-down"></i>
                        </a>
                      </span>
                      </div>
                    </div>
                  </th>
                  <th>
                    <div class="media">
                      <div class="d-flex align-self-center" >Email</div>
                      <div class="d-flex align-self-center ml-auto" style="margin-left:10px !important">
                        <span class="d-inline-block g-width-10 g-line-height-1 g-font-size-10">
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-up"></i>
                        </a>
                        <a class="g-color-gray-light-v6 g-color-secondary--hover g-text-underline--none--hover" href="#">
                          <i class="hs-admin-angle-down"></i>
                        </a>
                      </span>
                      </div>
                    </div>
                  </th>
                  
                  <th></th>
                </tr>
              </thead>
              <tbody>            
                    <% foreach (var site in studentList) { %>  
              
                            
                <tr>
                  <td><%= site.Id %></td>
                  <td><%= site.Name %></td>
                  <td><%= site.Pass %></td>
                  <td><%= site.Role %></td>
                  <td><%= site.Email %></td>
                  <td class="text-right">
                    <div class="g-pos-rel g-top-3 d-inline-block">
                        <asp:Button ID="btnApproved" Visible="true" runat="server" Text="Edit" 
                            CssClass="u-tags-v1 text-center g-width-100 g-brd-around g-brd-lightblue-v3 g-bg-lightblue-v3 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15" />                               
                    </div>
                  </td>
        
                   <% } %>
              </tbody>
                
            </table>
          </div>

C# Code Behind

        public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Pass { get; set; }
        public string Role { get; set; }
        public string Email { get; set; }
    }

    private void LoadData()
    {
        DataTable dt = new DataTable();
        dt = objc.DropDownLoadByStatement(@"Exec SP_Dashboard_BNFE @Opt=8", "cnOOSC");

        //if (dt.Rows.Count > 0)
        foreach (DataRow row in dt.Rows)
        {
            Student student = new Student();
            student.Id = int.Parse(row["Id"].ToString());
            student.Name = row["Name"].ToString();
            student.Pass = row["Pass"].ToString();
            student.Role = row["Role"].ToString();
            student.Email = row["Email"].ToString();
            studentList.Add(student);
        }
    }

My Javascript

<script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler =
            function (row) {
                return function () {
                    var cell = row.getElementsByTagName("td")[1];
                    var id = cell.innerHTML;
                    alert("id:" + id);
                };
            };
        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();

question from:https://stackoverflow.com/questions/65848576/get-selected-row-through-edit-button-from-html-table

Answer 1

Waitting for answers