您的位置：首页 > Web前端 > JQuery

jquery 可编辑的表格

2009-12-23 23:11 169 查看

table {
border:1px solid black;
/*修正边框，使其合并	*/
border-collapse: collapse;
width: 300px;
height: 200px;

}
table th{
border:1px solid black;
border-collapse: collapse;
width: 50%
}
tbody  th{
background-color:blue
}
table td{
border:1px solid black;
border-collapse:  collapse;
width: 50%
}
td input {
border-width:0;
color:red;

}

<%@ page language="java" import="java.util.*;" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath %>">
<mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript" src="js/edittable.js" mce_src="js/edittable.js"></mce:script>
<link rel="stylesheet" type="text/css" href="css/css.css" mce_href="css/css.css">
</head>
<body>
<table id="tab">
<thead>
<tr>
<th colspan="2">
可编辑的表格
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
学号
</th>
<th>
姓名
</th>
</tr>
<tr>
<form>
<td name="td1">
1
</td>
<td>
张三
</td>
</tr>
<tr>
<td>
2
</td>
<td>
李四
</td>
</tr>
<tr>
<td>
3
</td>
<td>
王五
</td>
</tr>
<tr>
<td>
4
</td>
<td>
赵六
</td>
</tr>
</form>
</tbody>
</table>
</body>
</html>

index.jsp

//页面刚刚装载好时运行此function
//ready 是一个函数，参数是又 是一个函数，
//效果相当于，<body onload="">
/*
$(document).ready(function() {
$("#sub").click(action_);
})*/
//效果与$(document.ready(function(){}))同
$(function() {
$("tbody tr:even").css("background", "green");
// $("tbody td ") 找到所有的td ，而加上:even 后则找到的是所有的学号（排除了奇数的姓名 ）
// tds 是一个<td> 对象的数组，tds.click() 表示数组里的每个无素被 单击时将招待td_click_action ()
$("tbody  td:even").click(td_click_action);
})
function td_click_action() {
var td = $(this);
// 判断 <td> 下面是否有《input》
if (td.children("input").length > 0) {
return;
}
var input = $("<input type='text' >");
var inputVal = td.text();
td.html("");
input.val($.trim(inputVal));
input.appendTo(td);
input.focus();
input.get(0).select();
input.keyup(keyup_action);
input.blur(input_blur_action);
};
function keyup_action(event) {
var keycode_ = event.which;
/*
处理回车键
*/
if (keycode_ == 13) {

}
/*
处理esc
*/

if (keycode_ == 27) {
td.html("");
td.append(inputVal)
}
};
function input_blur_action() {
var input = $(this);
var inputVal = input.val();
var par = input.parent();
par.html("");
// 此时可以向server好出modify 后再更新下面的内容
par.append(inputVal);
}

//页面刚刚装载好时运行此function
//ready 是一个函数，参数是又 是一个函数，
//效果相当于，<body onload="">
/*
$(document).ready(function() {
$("#sub").click(action_);
})*/
//效果与$(document.ready(function(){}))同
$(function() {
$("tbody tr:even").css("background", "green");
// $("tbody td ") 找到所有的td ，而加上:even 后则找到的是所有的学号（排除了奇数的姓名 ）
// tds 是一个<td> 对象的数组，tds.click() 表示数组里的每个无素被 单击时将招待td_click_action ()
$("tbody  td:even").click(td_click_action);
})
function td_click_action() {
var td = $(this);
// 判断 <td> 下面是否有《input》
if (td.children("input").length > 0) {
return;
}
var input = $("<input type='text' >");
var inputVal = td.text();
td.html("");
input.val($.trim(inputVal));
input.appendTo(td);
input.focus();
input.blur(input_blur_action);
};
function input_blur_action() {
var input = $(this);
var inputVal = input.val();
var par = input.parent();
par.html("");
// 此时可以向server好出modify 后再更新下面的内容
par.append(inputVal);
}

edittable.js

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航