今天学习了利用jquery实现可以编辑的表格这个例子。这个例子需求是这样的：在前台的表格中单击单元格便可修改其中的内容，回车键保存修改的内容，esc撤销保存的内容。原理：单击客户端表格单元格时，在单元格中添加一个文本框，并将单元格中原来的内容赋值给文本框，再进一步去修改文本框内容，修改后将文本框内容重新赋值给单元格。
：
前台代码：
. 代码如下:
<%@ page language="c#" autoeventwireup="true" codebehind="webform1.x.cs" inherits="webapplication1.webform1" %>
<!doctype html
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>jq2—可以编辑的表格</title>
<link href="css/edittable.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edittable.js"></script>
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>
</head>
<body>
<form id="form1" runat="server">
<p>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击表格项就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>张三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</p>
</form>
</body>
</html>
. 代码如下:
body {
}
table {
border:1px solid #000000;
border-collapse:collapse;/*单元格边框合并*/
width:400px;
}
table td {
border:1px solid #000000;
width:50%;
}
table th {
border:1px solid #000000;
width:50%;
}
tbody th {
background-color:#426fae;
}
. 代码如下:
$(function () {
//找到表格中除了第一个tr以外的所有偶数行
//使用even为了通过tbody tr返回所有tr元素
$("tbody tr:even").css("background-color", "#ece9d8");
//找到所有的学号单元格
var numid = $("tbody td:even");
//给单元格注册鼠标点击事件
numid.click(function () {
//找到对应当前鼠标点击的td，this对应的就是响应了click的那个td
var tdobj = $(this);
//判断td中是否有文本框
if (tdobj.children("input").length>0) {
return false;
}
//获取表格中的内容
var text = tdobj.html();
//清空td中的内容
tdobj.html("");
//创建文本框
//去掉文本框的边框
//设置文本框中字体与表格中的文字大小相同。
//设置文本框的背景颜色与表格的背景颜色一样
//是文本框的宽度和td的宽度相同
//并将td中值放入文本框中
//将文本框插入到td中
var inputobj = $("<input type='text'>").css("border-width", "0").css("font-size", tdobj.css("font-size")).css("background-color", tdobj.css("background-color")).width(tdobj.width()).val(text).appendto(tdobj);
//文本框插入后先获得焦点、后选中
inputobj.trigger("focus").trigger("select")
//文本框插入后不能被触发单击事件
inputobj.click(function () {
return false;
});
//处理文本框上回车和esc按键的操作
inputobj.keyup(function (event) {
//获取当前按下键盘的键值
var keycode = event.which;
//处理回车的情况
if (keycode==13) {
//获取当前文本框中的内容
var inputtext = $(this).val();
//将td中的内容修改为文本框的内容
tdobj.html(inputtext);
}
//处理esc的内容
if (keycode==27) {
//将td中的内容还原成原来的内容
tdobj.html(text);
}
});
});
});
如对本文有疑问， 点击进行留言回复！！
javascript 04 类型转换、if else条件语句、函数(方法)
我要评论
网友评论