JQuery可编辑表格提交到数据库

liufei.fir

浏览: 690117 次
性别:
来自: 上海

最近访客更多访客>>

性感迷人可爱又温柔的马云

dragonsky_w

清香白莲素还真

manyu042418

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java web 学习笔记

jQuery MySQL Java SQL JDBC

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(){
$("tbody tr:even").css("background-color","#ECE9D8");
var tds = $("tbody td");
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(td.width()-1);
    input.height(td.height());
    //将文本框加入到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());
        var sno = td.parents("tr").children("td").eq(0).text();

        var value = inputNode.val();

$.get("http://localhost:8080/EditTable/UpdateStudent?sno="+encodeURI(sno)+"&option="+encodeURI(option)+"&"+option+"="+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();
}

分享到：

web 缓存 | Javascript keyCode键盘键码值表

2010-08-19 19:55
浏览 2187
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论