CRUD JQuery3

<form id="form2" runat="server">
     <input type="hidden" id="lblId" />
       <table style="font-size: 18px" id="tblStudentForm">
            <tr>
                <td colspan="2">
                    <h1>Registration Form</h1>
                </td>
            </tr>
            <tr>
                <td>Name</td>
                <td>
                    <input type="text" id="txtName" /></td>
            </tr>
            <tr>
                <td>Subject:</td>
                <td>
                    <select name="pets" id="ddlSub">
                        <option value="">--Select Subjects--</option>
                        <option value="1">Physics</option>
                        <option value="2">Chemistry</option>
                        <option value="3">Biology</option>
                        <option value="4">Maths</option>
                        <option value="5">English</option>
                        <option value="6">Computer</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input type="email" id="txtEmail" /></td>
            </tr>
            <tr>
                <td>Gender:</td>
                <td>
                    <label>
                        Male
            <input type="radio" id="rbtnmale" name="gender" value="male" />
                    </label>
                     
            <label>
                FeMale
            <input type="radio" id="rbtnfemale" name="gender" value="female" />
            </label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button type="button" onclick="adddata()">Save<</button>
                    <button type="button" onclick="clearAllTextBoxes(
                        'tblStudentForm')" >Clear </button> 
                </td>
            </tr>
        </table>
     <h2>Registration Data</h2>
        <div>
            <table class="table" id="tblStudents">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Name</th>
                       <th scope="col">Email</th>
                        <th scope="col">Gender</<th>
                        <th scope="col">Subject</<th>
                        <th scope="col">Actions</<th>
                    </tr>
               </thead>
                <tbody id="tabledata">
             </tbody>
          </table>
      </div>
</form>

$(document).ready(function () {
    getAllStudent("");
});


function getAllStudent(id) {
    if (id == "") 
        callServiceMethod("StudentForm3.aspx", "getStudents", "{'id':'" + id + "'}", scs_getAllStudent);
    else
        callServiceMethod("StudentForm3.aspx", "getStudents", "{'id':'" + id + "'}", scs_getEditStudent);
}

function scs_getEditStudent(data) {
    var datas = JSON.parse(data.d);
    $('#lblId').val(datas[0].id);
    $('#txtName').val(datas[0].name);
    $('#txtEmail').val(datas[0].email);
    if (datas[0].gender == "male") {
        $('#rbtnmale').prop("checked", true)
    } if (datas[0].gender == "female") {
        $('#rbtnfemale').prop("checked", true)
    }
    $('#ddlSub option[value=' + datas[0].subjectid + ']').attr("selected", "");
}

function scs_getAllStudent(data) {
    var datas = JSON.parse(data.d);
    $('#tabledata').empty();
    for (var i = 0; i < datas.length; i++) {
        $('#tabledata').append('<tr id="trStudent_' + datas[i].Id + '">
            <td>' + '<a href="#" onclick="getAllStudent(' + datas[i].Id +',this)">edit</>
          | <a href="#"  onclick="deleteStudent(' + datas[i].Id + ')">delete</>' + '</td>' +
            '<td id>' + datas[i].Id + '</td>' +
            '<td name>' + datas[i].Name + '</td>' +
            '<td email>' + datas[i].Email + '</td>' +
            '<td gen>' + datas[i].Gender + '</td>' +
            '<td sub>' + datas[i].SubjectId + '</td></tr>');
    }
}


function deleteStudent(id) {
    if (confirm("Do you want to delete?")) {
        callServiceMethod("StudentForm2.aspx", "Delete", "{'id':" + id + "}", function () {
            scs_deleteStudent(id);
        });
    }
}

function scs_deleteStudent(id) {
        $("#trStudent_" + id).remove();
        alert("Row Deleted Successfully");
}

function addData() {
    var data = "{'id':'" + $('#lblId').val() + "','name':'" + $('#txtName').val()
                + "','email':'" + $('#txtEmail').val() + "','gender':'" + 
                $('[name="gender"]:checked').attr("value") + "','subject':'" + 
                $('#ddlSub').val() +"'}"
    callServiceMethod("StudentForm2.aspx", "saveStudent", data , scs_method)
}

function scs_method() {
    alert("Student Saved Successfully");
}

function clearAllTextBoxes(containerId) {
    $("#" + containerId + " input[type='text']").val("");
    $("#" + containerId + " select").val("");
    $("#" + containerId + " input[type='radio']").prop("checked", false);
}

function callServiceMethod(urlPath, CollingMethod, data, scsMethod) {
    $.ajax({
        type: "POST",
        url: urlPath + "/" + CollingMethod,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: function (response) {
            if (scsMethod != "") {
                scsMethod(response)
            }
        },
        error: function (err) {
            console.log(err.statusText);
        }
    });
}

[WebMethod]
 public static string getStudents(string id)
 {
   sqlHelper sqlhel = new sqlHelper();
   if (string.IsNullOrEmpty(id))
        return JsonConvert.SerializeObject(sqlhel.getDataTable(@"select * from tblStudents"));
   else
       {
          return JsonConvert.SerializeObject(sqlhel.getDataTable(@" select s.id,s.name,
            s.email,s.gender,m.Sub_Name from tblStudents s
            left outer join MasterSubjects m on s.Id = m.Id    
            where s.Id=" + id)); 
        }
   }

[WebMethod]
public static string Delete(int id)
{
    sqlHelper sqlhel = new sqlHelper();
     var query = @"delete from tblStudents where id=" + id;
      return JsonConvert.SerializeObject(sqlhel.getDataRow(query));
}

[WebMethod]
public static string InsertOrUpdate(string id, string name, string email, string gender, string subject )
{
    sqlHelper sqlhel = new sqlHelper();
    string[] cols = { "Name", "email", "gender", "subjectId" };
    object[] vals = { name, email, gender, subject  };
    if (string.IsNullOrEmpty(id))
     {
        sqlhel.insertValIntoTable("tblStudents", cols, vals);
     }
    else
     {
         sqlhel.updateValIntoTable("tblStudents", cols, vals, "id", id);
     }
      return "";
}