Live Table Edit with Jquery ,Ajax and Java

Very thankful to srinivas tamada for writing this post already he did live table edit in php but now am going to teach you how to do this in pure java.i hope you like it .Lets start...

                            Download this code:  click here

Database:

i took a single table named fullnames columns is,firstname,lastname

CREATE TABLE fullnames
(
id INT PRIMARY KEY AUTO_INCREMENT,
firstname VARCHAR(70),
lastname VARCHAR(70)
);

wireframe:

 

index.jsp : For displaying records

<table width="100%">
<tr class="head">
<th>First Name</th><th>Last Name</th>
</tr>
<%
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:edit","","");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from fullnames");
int i=1;
while(rs.next())
{
int id=rs.getInt(1);
String firstname=rs.getString(2);
String lastname=rs.getString(3);
if(i%2==0)
{
%>
<tr id="<%=id%>" class="edit_tr">
<% 
} 
else 
{ %>
<tr id="<%=id%>" bgcolor="#f2f2f2" class="edit_tr">
<% } %>
<td width="50%" class="edit_td">
<span id="first_<%=id%>" class="text"><%=firstname %></span>
<input type="text" value="<%=firstname%>" class="editbox" id="first_input_<%=id%>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<%=id%>" class="text"><%=lastname%></span> 
<input type="text" value="<%=lastname%>"  class="editbox" id="last_input_<%=id %>"/>
</td>
</tr>

<%
i++;
}
con.close();
}
 catch(Exception e)
 {
 out.println(e);
 }
%>

</table>

Javascript Code:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />');


if(first.length && last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.jsp",
data: dataString,
cache: false,
success: function(html)
{

$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}
});

$(".editbox").mouseup(function() 
{
return false
});

$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});
</script>

css code:

 

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#333;
color:#FFFFFF
}

I connected jsp to ms access database after downloading this code you have to set data source name path and place it in webapps folder of apache run it . even though if have any doubts comment here i will clarify it. mail me vydyas@gmail.com