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

JQuery-可以编辑的表格

2010-09-02 22:43 471 查看

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditTable.aspx.cs" Inherits="Web.Two.EditTable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery实例2-可以编辑的表格</title>

<script src="../JavaScript/jquery-1.2.6-intellisense.js" type="text/javascript"></script>

<link href="../CSS/Css.css" rel="stylesheet" type="text/css" />

<script src="../JavaScript/JQuery.js" type="text/javascript"></script>

<script src="../JavaScript/EditTable.js" type="text/javascript"></script>

</head>
<body>
<form id="form1" runat="server">
<table>
<thead>
<tr>
<th colspan="2">
鼠标点击表格项就可以编辑
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
学号
</th>
<th>
姓名
</th>
</tr>
<tr>
<td>
00001
</td>
<td>
张三
</td>
</tr>
<tr>
<td>
00002
</td>
<td>
李四
</td>
</tr>
<tr>
<td>
00003
</td>
<td>
王五
</td>
</tr>
<tr>
<td>
0004
</td>
<td>
老六
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Css.css样式代码:

.userText
{
/*控件文本框的边框是红色的实线*/
border:1px solid red;
background-image:url(../image/userName.jpg);
background-repeat:repeat-x;
background-position :bottom ;
}
table
{
border:1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse:collapse;
width:400px;
}
table td
{
border:1px solid black;
width:50%;
}
table th
{
border:1px solid black;
width:50%;
}
tbody th
{
background-color:#A3bae9;
}

EditTable.js代码:

//在整个页面装载完成之后完成
$(function(){

//找到表格的内容区域中除了第一个tr以外所有的偶数行
//使用even是为了把通过tbody返回的所有tr元素中，在数组里面下标是偶数的元素返回,因为这些元素，实际上才是我们期望的tbody
//里面的奇数行
$("tbody tr:even").css("background-color","#ece9d8")
//我们需要找到所有的学号单元格
var numTd = $("tbody td:even");
//给这些单元格注册鼠标点击的事件
numTd.click(function(){
//找到当前鼠标点击的td,this对应的就是响应了click的那个td
var tdObj = $(this);
if(tdObj .children("input").length>0){
//当前td中有ipnut，不执行click处理
return false ;
}
var text = tdObj .html();
//清空 td中的内容
tdObj .html(" ");
//创建一个文本框
//去掉文本框的边框
//设置文本框的文字字体大小是16px
//使文本框的宽度和td的宽度相同
//设置文本框的背景色
//需要将当前td中的内容放到文本框中
//将文本框插入到td中
var inputObj = $("<input type='text'>").css("border-width","0") .css("font-size","16px")
.width(tdObj .width()).css("background-color",tdObj .css("background-color"))
.val(text).appendTo(tdObj);
//使文本框插入之后就被选中
inputObj .trigger("focus").trigger("select");
inputObj .click(function(){
return false ;
});
//处理文本框上回车和esc按键的操作
inputObj .keyup(function(event){
//获取当前按下键盘的键值
var keycode = event.witch;
//处理回车键的情况
if(keycode == 13){
//获取当前文本框的内容
var inputtext = $(this).val();
//将td的内容修改成文本框的内容
tdObj .html(inputtext);
}
//处理esc的情况
if(keycode == 27){
//将td中的内容还原成text
tdObj .html(tdObj.html());
}
});
});
});

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

标签：

相关文章推荐

新的分享

章节导航