Hi smile,
Refer the below sample for your reference and change the jQuery code as per your requirement.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('[id*=txtObtain]').on("blur", function () {
var totalMarks = $(this).closest('tr').find('td').eq(6).text();
if (parseInt($(this).val()) > parseInt(totalMarks)) {
alert('Obtain Marks should be less than Total Marks');
$(this).val('');
$(this).focus();
}
});
});
</script>
<table cellspacing="0" rules="all" class="table table-striped table-bordered table-hover"
border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th scope="col">
Reg No.
</th>
<th scope="col">
Ref No.
</th>
<th scope="col">
Student Name
</th>
<th scope="col">
Father Name
</th>
<th scope="col">
Phone No.
</th>
<th scope="col">
Subject
</th>
<th scope="col">
Total
</th>
<th scope="col">
Pass
</th>
<th scope="col">
Obtain
</th>
</tr>
<tr>
<td style="width: 100px;">
R-000267
</td>
<td style="width: 70px;">
A-123
</td>
<td style="width: 200px;">
Ramzan Ateeq
</td>
<td style="width: 200px;">
Muhammad Ateeq
</td>
<td style="width: 70px;">
1111111111
</td>
<td style="width: 100px;">
English
</td>
<td style="width: 70px;">
50
</td>
<td style="width: 70px;">
17
</td>
<td>
<input name="GridView1$ctl02$txtObtain" type="text" id="GridView1_txtObtain_0" class="form-control"
style="width: 50px;" />
</td>
</tr>
<tr>
<td style="width: 100px;">
R-000268
</td>
<td style="width: 70px;">
B-456
</td>
<td style="width: 200px;">
Mueeb Ullah Zaheer
</td>
<td style="width: 200px;">
Muhammad Zaheer
</td>
<td style="width: 70px;">
2222222222
</td>
<td style="width: 100px;">
English
</td>
<td style="width: 70px;">
50
</td>
<td style="width: 70px;">
17
</td>
<td>
<input name="GridView1$ctl03$txtObtain" type="text" id="GridView1_txtObtain_1" class="form-control"
style="width: 50px;" />
</td>
</tr>
</table>
</body>
</html>
Demo
You need to change the above html with your asp controls i.e. GridView and bind the gridview with database.
HTML
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('[id*=txtObtain]').on("blur", function () {
var totalMarks = $(this).closest('tr').find('td').eq(6).text();
if (parseInt($(this).val()) > parseInt(totalMarks)) {
alert('Obtain Marks should be less than Total Marks');
$(this).val('');
$(this).focus();
}
});
});
</script>
<asp:GridView ID="GridView1" runat="server" AllowPaging="false" Class="table table-striped table-bordered table-hover"
AutoGenerateColumns="false">
<Columns>
<asp:BoundField ItemStyle-Width="100px" DataField="AdmissionNo" HeaderText="Reg No." />
<asp:BoundField ItemStyle-Width="70px" DataField="ReferenceNo" HeaderText="Ref No." />
<asp:BoundField ItemStyle-Width="200px" DataField="SName" HeaderText="Student Name" />
<asp:BoundField ItemStyle-Width="200px" DataField="FName" HeaderText="Father Name" />
<asp:BoundField ItemStyle-Width="70px" DataField="FPhone" HeaderText="Phone No." />
<asp:BoundField ItemStyle-Width="100px" DataField="SubjectName" HeaderText="Subject" />
<asp:BoundField ItemStyle-Width="70px" DataField="TotalMarks" HeaderText="Total" />
<asp:BoundField ItemStyle-Width="70px" DataField="PassMarks" HeaderText="Pass" />
<asp:TemplateField>
<HeaderTemplate>
Obtain
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtObtain" runat="server" class="form-control" Width="50"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BindSectionGrid();
}
}
private void BindSectionGrid()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] {
new DataColumn("AdmissionNo", typeof(string)),
new DataColumn("ReferenceNo", typeof(string)),
new DataColumn("SName",typeof(string)),
new DataColumn("FName",typeof(string)),
new DataColumn("FPhone",typeof(string)),
new DataColumn("SubjectName",typeof(string)),
new DataColumn("TotalMarks",typeof(string)),
new DataColumn("PassMarks",typeof(string))
});
dt.Rows.Add("R-000267", "A-123", "Ramzan Ateeq", "Muhammad Ateeq", "1111111111", "English", "50", "17");
dt.Rows.Add("R-000268", "B-456", "Mueeb Ullah Zaheer", "Muhammad Zaheer", "2222222222", "English", "50", "17");
GridView1.DataSource = dt;
GridView1.DataBind();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
BindSectionGrid()
End If
End Sub
Private Sub BindSectionGrid()
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("AdmissionNo", GetType(String)), New DataColumn("ReferenceNo", GetType(String)), New DataColumn("SName", GetType(String)), New DataColumn("FName", GetType(String)), New DataColumn("FPhone", GetType(String)), New DataColumn("SubjectName", GetType(String)), _
New DataColumn("TotalMarks", GetType(String)), New DataColumn("PassMarks", GetType(String))})
dt.Rows.Add("R-000267", "A-123", "Ramzan Ateeq", "Muhammad Ateeq", "1111111111", "English", _
"50", "17")
dt.Rows.Add("R-000268", "B-456", "Mueeb Ullah Zaheer", "Muhammad Zaheer", "2222222222", "English", _
"50", "17")
GridView1.DataSource = dt
GridView1.DataBind()
End Sub