Get Column values on edit Button Click in HTML Table using jQuery

Hi zeeshanpas,

Please refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<div class="row">
    <div class="col-sm-12">
        <table id="tbl_TutorcoursList" style="table-layout: fixed; word-wrap: break-word"
            class="table table-hover table-bordered table-striped table-responsive">
            <thead>
                <tr>
                    <th>Subject</th>
                    <th>SubjectId</th>
                    <th>School_level</th>
                    <th>School_levelId</th>
                    <th>Course</th>
                    <th>CourseId</th>
                    <th>Subject Priority</th>
                    <th>School level Priority</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody id="tblBody_TutorcoursList">
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var tableBody = $('#tblBody_TutorcoursList');
                $.each(r.d, function (index, item) {
                    tableBody.append('<tr><td name="Subject">' + item.Sub
                    + '</td><td name="SubjectId">' + item.SubId
                    + '</td><td name="School_Level">' + item.Sclevl
                    + '</td><td name="School_Level_Id">' + item.SclevlId
                    + '</td><td name="Select_Course">' + item.SelectdCoures
                    + '</td><td name="Select_Course_Id">' + item.SelectdCouresId
                    + '</td><td name="Subject_Priority">' + item.SubjctPriority
                    + '</td><td name="School_Level_Priority">' + item.SclevlPriority
                    + '</td><td><button type=button onclick= "TutorCourseEdit(this);" class="btnedit" data-id=' + item.Id + '>Edit</button></td><td><button type="button" onclick= "TutorCourseDelete(this);" class="btndelete" data-id=' + item.Id + '>Delete</button></td></tr>');
                });
            }
        });
    });

    function TutorCourseEdit(ctl) {
        var row = $(ctl).closest("tr");
        var _activeId = row.find('[name=Subject_Priority]').html();
        alert(_activeId);
    }

    function TutorCourseDelete(ctl) {
        var row = $(ctl).closest("tr");
        var _activeId = row.find('[name=Subject_Priority]').html();
        alert(_activeId);
    }
</script>

Namespaces

C#

using System.Data;
using System.Web.Services;

Code

C#

[WebMethod]
public static List<Data> GetData()
{
    List<Data> items = new List<Data>();
    items.Add(new Data { Sub = "ASP.Net", SubId = 1, Sclevl = "High", SclevlId = 6, SelectdCoures = "Bscit", SelectdCouresId = 10, SubjctPriority = "High", SclevlPriority = "A+" });
    items.Add(new Data { Sub = "Java", SubId = 2, Sclevl = "Medium", SclevlId = 7, SelectdCoures = "Bscit", SelectdCouresId = 20, SubjctPriority = "Medium", SclevlPriority = "A" });
    items.Add(new Data { Sub = "Python", SubId = 3, Sclevl = "Low", SclevlId = 8, SelectdCoures = "Bscit", SelectdCouresId = 30, SubjctPriority = "Low", SclevlPriority = "B+" });
    return items;
}   

public class Data
{
    public string Sub { get; set; }
    public int SubId { get; set; }
    public string Sclevl { get; set; }
    public int SclevlId { get; set; }
    public string SelectdCoures { get; set; }
    public int SelectdCouresId { get; set; }
    public string SubjctPriority { get; set; }
    public string SclevlPriority { get; set; }
}

Screenshot