Get data id attribute of an Element 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_NetworkList" style="width: 360px;" class="table table-hover table-bordered table-striped table-responsive">
            <thead>
                <tr>
                    <th>Subject</th>
                    <th>School_level</th>
                    <th>Course</th>
                </tr>
            </thead>
            <tbody id="tblBody_NetworkList">
            </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_NetworkList');
                $.each(r.d, function (index, item) {
                    tableBody.append('<tr><td name="sub">' + item.Subject + '</td><td name="sclevl">' + item.School_level
                    + '</td><td name="selectdcours">' + item.Course
                    + '</td><td></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 _activeId = $(ctl).closest("tr").find('.btnedit').data("id");
        alert(_activeId);
    }

    function TutorCourseDelete(ctl) {
        var _activeId = $(ctl).closest("tr").find('.btndelete').data("id");
        alert(_activeId);
    }
</script>

Namespace

 C#

using System.Web.Services;

Code

C#

[WebMethod]
public static List<Data> GetData()
{
    List<Data> items = new List<Data>();
    items.Add(new Data { Id=1,Subject = "ASP.Net", School_level = "High", Course = "Bscit" });
    items.Add(new Data { Id=2,Subject = "Java", School_level = "Medium", Course = "Bscit" });
    items.Add(new Data { Id=3,Subject = "Python", School_level = "Low", Course = "Bscit" });
    return items;
}

public class Data
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public string School_level { get; set; }
    public string Course { get; set; }
}

Screenshot