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

利用JQuery制作可编辑的表格

2009-12-18 23:50 471 查看

<%@ page language="java" pageEncoding="gbk"%>
<%
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>

<title>Jquery Test</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:style type="text/css"><!--
table{
border:black 1px solid;
border-collapse:collapse;
width:400px;
}
table td
{
border:black 1px solid;
width:50%;
}
table th
{
border:black 1px solid;
}
tbody th
{
background-color:#A3BAE9;
}

--></mce:style><style type="text/css" mce_bogus="1">			table{
border:black 1px solid;
border-collapse:collapse;
width:400px;
}
table td
{
border:black 1px solid;
width:50%;
}
table th
{
border:black 1px solid;
}
tbody th
{
background-color:#A3BAE9;
}
</style>
<mce:script type="text/javascript"><!--
$(function()
{
//给相应的tr加上背景
$("tbody tr:even").css("background-color","#ECE9D8");
//获取第一列
var numTD=$("tbody td:even");
numTD.click(function()
{
var tdObj=$(this);
if(tdObj.children("input").length>0)
{
return false;
}
//create a node of textbox
var inputObj = $("<input type='text'>");
inputObj.css("border-width","0").css("font-size","16px");
//insert a textbox,find the current td

inputObj.width(tdObj.width());
inputObj.css("background-color",tdObj.css("background-color"));
//get the current content of td into textbox

inputObj.val($.trim(tdObj.html()));
var temp=$.trim(inputObj.val());
tdObj.html("");
inputObj.appendTo(tdObj);
inputObj.trigger("focus");
inputObj.click(function()
{
return false;
});
inputObj.keyup(function(event){
var keycode=event.which;
if(keycode==13)
{
var inputtext=$(this).val();
tdObj.html(inputtext);
}
if(keycode==27)
{
tdObj.html(temp);
}

});
});
});

// --></mce:script>
</head>

<body>
<table>
<thead>
<tr>
<th colspan=2>
Chick it and change it!
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
学号
</th>
<th>
姓名
</th>
</tr>
<tr>
<td>
0613410227
</td>
<td>
Jack Zhang
</td>
</tr>
<tr>
<td>
0613411234
</td>
<td>
Man Lee
</td>
</tr>
<tr>
<td>
0613411234
</td>
<td>
Man Lee
</td>
</tr>
</tbody>
</table>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航