JQuery可编辑表格交付到数据库
日期：2014-05-16 浏览次数：20482 次
JQuery可编辑表格提交到数据库
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());
&nbs
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());
&nbs
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
