JQuery可编辑的表格，并更新到数据库笔记

来源：互联网发布：正在准备windows等多久编辑：程序博客网时间：2024/05/10 04:33

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))+"&note="+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.效果