JQuery可编辑的表格，并更新到数据库笔记
2012-05-29 15:26
218 查看
1.EditTable.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page import="java.sql.*"%>
<html>
<head>
<title>EditTable</title>
<link rel="stylesheet" type="text/css" href="css/editTable.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">可编辑的表格</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<%
String sno,name;
int age = 0;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/test","root","");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("select sno,name,age from student");
while(rs.next()){
sno = rs.getString("sno");
name = rs.getString("name");
age = rs.getInt("age");
%>
<tr>
<td id="sno"><%=sno%></td>
<td id="name"><%=name %></td>
<td id="age"><%=age %></td>
</tr>
<%}%>
</tbody>
</table>
<div id="result"></div>
</body>
</html>
2.editTable.css
table{
border:1px solid black;
border-collapse:collapse;
width:400px;
}
table td{
border:1px solid black;
width:33%;
}
table th{
border:1px solid black;
width:33%;
}
tbody th{
background-color:#7998DF;
}
#result{
color:red;
}
3.editTable.js
//在页面加载时，让所有的td拥有一个点击事件
$(document).ready(function(){
$(".listnote").css("background-color","#ffffff");
var tds = $(".listnote");
tds.click(tdClick);
});
function tdClick(){
//保存当前的td节点
var td = $(this);
//取出当前td节点的文本内容并保存起来
var text = td.text();
//清空td里面的内容
td.html("");//也可以是td.empty();
//建立一个文本框
var input = $("<input>");
//设置文本框的值是刚保存起来的
input.attr("value",text);
input.width(80);
input.height(18);
//将文本框加入到td中
td.append(input);
//让文本框里的文字高亮选中
var inputDom = input.get(0);
inputDom.select();
//取消td的点击事件
td.unbind("click");
//让文本框响应键盘事件
input.keyup(function(event){
// var myEvent = event || window.event;
// var keyCode = myEvent.keyCode;
var keyCode=event.which;
//判断是否回车键按下
if(keyCode == 13){
//获得文本框
var inputNode = $(this);
// //保存文本框的值
// var inputText = inputNode.val();
// //获得td节点
// var tdNode = inputNode.parent();
// //设置td的值
// tdNode.html(inputText);
// //让td重新拥有点击事件
// tdNode.click(tdClick);
td.html(inputNode.val());
var tmp = td;
// alert(td.prev().text());
// var option = td.attr("id");
// alert(td.attr("id"));
//alert(td.parents("tr").children("td").eq(0).text());
//获取同一行上 第一列中的id值
var sno = td.parents("tr").children("td").eq(0).text();
var value = inputNode.val();
//alert(value);
$.get("/test/log-update?id="+encodeURI(encodeURI(sno))+"¬e="+encodeURI(encodeURI(value)),null,function(response){
$("#result").html(response);
});
td.click(tdClick);
}
else if(keyCode == 27){
td.html(text);
}
});
input.blur(function(){
var inputNode = $(this);
var inputText = inputNode.val();
var tdNode = inputNode.parent();
tdNode.html(inputText);
tdNode.click(tdClick);
});
}
4.DBcon.java
package com.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
class DBCon{
private static Connection con = null;
public DBCon(){
}
public synchronized static Connection getConnection()
{
try{
Class.forName("com.mysql.jdbc.Driver"); //加载MYSQL JDBC驱动
}catch (ClassNotFoundException e) {
e.printStackTrace();
}
try{
if(con == null)
con = DriverManager.getConnection("jdbc:mysql://localhost/test", "root", "");
System.out.println("Connect Successfully");
}catch(SQLException e1){
e1.printStackTrace();
}
return con;
}
}
5.CRUD.java
package com.db;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class CRUD {
public static int updateStudent(String sno, String option,String value){
int flag = 0;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "update student set " + option + "=? where sno=?";
try{
pstmt = DBCon.getConnection().prepareStatement(sql);
pstmt.setString(1,value);
pstmt.setString(2,sno);
flag =pstmt.executeUpdate();
}catch(SQLException e){
e.printStackTrace();
}
return flag;
}
}
6.UpdateStudent.java
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String sno = request.getParameter("sno");
String option = request.getParameter("option");
String value = request.getParameter(option);
int flag=CRUD.updateStudent(sno, option, value);
if(flag > 0)
out.println("更新成功!");
else
out.println("更新失败!");
out.flush();
out.close();
}
7.效果
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page import="java.sql.*"%>
<html>
<head>
<title>EditTable</title>
<link rel="stylesheet" type="text/css" href="css/editTable.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">可编辑的表格</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<%
String sno,name;
int age = 0;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/test","root","");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("select sno,name,age from student");
while(rs.next()){
sno = rs.getString("sno");
name = rs.getString("name");
age = rs.getInt("age");
%>
<tr>
<td id="sno"><%=sno%></td>
<td id="name"><%=name %></td>
<td id="age"><%=age %></td>
</tr>
<%}%>
</tbody>
</table>
<div id="result"></div>
</body>
</html>
2.editTable.css
table{
border:1px solid black;
border-collapse:collapse;
width:400px;
}
table td{
border:1px solid black;
width:33%;
}
table th{
border:1px solid black;
width:33%;
}
tbody th{
background-color:#7998DF;
}
#result{
color:red;
}
3.editTable.js
//在页面加载时，让所有的td拥有一个点击事件
$(document).ready(function(){
$(".listnote").css("background-color","#ffffff");
var tds = $(".listnote");
tds.click(tdClick);
});
function tdClick(){
//保存当前的td节点
var td = $(this);
//取出当前td节点的文本内容并保存起来
var text = td.text();
//清空td里面的内容
td.html("");//也可以是td.empty();
//建立一个文本框
var input = $("<input>");
//设置文本框的值是刚保存起来的
input.attr("value",text);
input.width(80);
input.height(18);
//将文本框加入到td中
td.append(input);
//让文本框里的文字高亮选中
var inputDom = input.get(0);
inputDom.select();
//取消td的点击事件
td.unbind("click");
//让文本框响应键盘事件
input.keyup(function(event){
// var myEvent = event || window.event;
// var keyCode = myEvent.keyCode;
var keyCode=event.which;
//判断是否回车键按下
if(keyCode == 13){
//获得文本框
var inputNode = $(this);
// //保存文本框的值
// var inputText = inputNode.val();
// //获得td节点
// var tdNode = inputNode.parent();
// //设置td的值
// tdNode.html(inputText);
// //让td重新拥有点击事件
// tdNode.click(tdClick);
td.html(inputNode.val());
var tmp = td;
// alert(td.prev().text());
// var option = td.attr("id");
// alert(td.attr("id"));
//alert(td.parents("tr").children("td").eq(0).text());
//获取同一行上 第一列中的id值
var sno = td.parents("tr").children("td").eq(0).text();
var value = inputNode.val();
//alert(value);
$.get("/test/log-update?id="+encodeURI(encodeURI(sno))+"¬e="+encodeURI(encodeURI(value)),null,function(response){
$("#result").html(response);
});
td.click(tdClick);
}
else if(keyCode == 27){
td.html(text);
}
});
input.blur(function(){
var inputNode = $(this);
var inputText = inputNode.val();
var tdNode = inputNode.parent();
tdNode.html(inputText);
tdNode.click(tdClick);
});
}
4.DBcon.java
package com.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
class DBCon{
private static Connection con = null;
public DBCon(){
}
public synchronized static Connection getConnection()
{
try{
Class.forName("com.mysql.jdbc.Driver"); //加载MYSQL JDBC驱动
}catch (ClassNotFoundException e) {
e.printStackTrace();
}
try{
if(con == null)
con = DriverManager.getConnection("jdbc:mysql://localhost/test", "root", "");
System.out.println("Connect Successfully");
}catch(SQLException e1){
e1.printStackTrace();
}
return con;
}
}
5.CRUD.java
package com.db;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class CRUD {
public static int updateStudent(String sno, String option,String value){
int flag = 0;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "update student set " + option + "=? where sno=?";
try{
pstmt = DBCon.getConnection().prepareStatement(sql);
pstmt.setString(1,value);
pstmt.setString(2,sno);
flag =pstmt.executeUpdate();
}catch(SQLException e){
e.printStackTrace();
}
return flag;
}
}
6.UpdateStudent.java
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String sno = request.getParameter("sno");
String option = request.getParameter("option");
String value = request.getParameter(option);
int flag=CRUD.updateStudent(sno, option, value);
if(flag > 0)
out.println("更新成功!");
else
out.println("更新失败!");
out.flush();
out.close();
}
7.效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- asp+jquery可编辑表格更新到数据库
- jQuery学习笔记--jqGrid的使用方法(编辑,删除,更新,新增)
- jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格
- MyBatis笔记----MyBatis数据库表格数据修改更新的两种方法：XML与注解
- jQuery学习笔记--jqGrid的使用方法(编辑,删除,更新,新增)
- WPF学习笔记——编辑DataGrid单元格并实时更新到数据库
- jquery学习笔记二 实现可编辑的表格
- JQuery结合Ajax实现双击Table表格，使Table变成可编辑，并保存到数据库中
- WPF学习笔记——编辑DataGrid单元格并实时更新到数据库
- jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格
- jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Fi
- jQuery学习笔记— jQuery对表单、表格的操作以及更多应用
- 小谷实战Jquery(二)--可以编辑的表格
- 巧妙使用JQuery Clone 添加多行数据，并更新到数据库
- <JQuery>双击编辑异步更新
- jquery插件【编辑表格】
- HTML之JQuery基础实现可编辑表格
- JQuery-可以编辑的表格