CRUD JQuery2

<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) {
    $.ajax({
        type: "POST",
        url: 'StudentForm2.aspx/getStudents',
        crossDomain: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        //data: JSON.stringify({ id: id }),
        data: "{'id':'"+id+"'}",
        success: function (response) {
            var datas = JSON.parse(response.d);
            console.log(datas)
            if (id == "") {
                $('#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>
                        |  <a href="#"  onclick="deleteStudent(' + datas[i].Id + ')">delete </a>'
                         + ' </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>');
                        }
            }
            else {
                $('#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", "");
            }  
        },
        error: function (err) {
            console.log(err);
        }
    });
}

function deleteStudent(id) {
    if (confirm("do you want to delete ")) {
        $.ajax({
            type: "POST",
            url: 'StudentForm.aspx/Delete',
            crossDomain: true,
            contentType: "application/json; charset=utf-8",
            data: "{'id':" + id + "}",
            success: function (response) {
                alert("Row Deleted Successfully");
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
}

function adddata() { 
    $.ajax({
        type: "POST",
        url: 'StudentForm.aspx/InsertOrUpdate',
        crossDomain: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{'id':'" + $('#lblId').val() +
            "','name':'" + $('#txtName').val() +
            "','email':'" + $('#txtEmail').val() +
            "','gender':'" + $('[name="gender"]:checked').attr("value") +
            "','subject':'" + $('#ddlSub').val() + "'}",
        success: function (response) {
            alert("data added");
        },
        error: function (err) {
            console.log(err);
        }
    });
}
function clearAllTextBoxes(containerId) {
    $("#" + containerId + " input[type='text']").val("");
    $("#" + containerId + " select").val("");
    $("#" + containerId + " input[type='radio']").prop("checked", false);
}

[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 "";
}