今天学习了利用jQuery实现可以编辑的表格这个例子。这个例子需求是这样的：在前台的表格中单击单元格便可修改其中的内容，回车键保存修改的内容，esc撤销保存的内容。原理：单击客户端表格单元格时，在单元格中添加一个文本框，并将单元格中原来的内容赋值给文本框，再进一步去修改文本框内容，修改后将文本框内容重新赋值给单元格。
源码：
前台代码：
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html
<html xmlns="http://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="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/editTable.js"><%--<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.9.1.js"></head>
<body>
<form id="form1" runat="server">
<div>
<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>
</div>
</form>
</body>
</html>
css代码：
复制代码 代码如下:
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;
}
jquery代码
复制代码 代码如下:
$(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);
}
});
});
});
总结：通过这一实例的学习能获得的知识点：
一、html方面
1.table中可以包含thead和tbody
2.表头的内容中可以放th中
3.table{}这种写法称作标签选择器，可以对整个table产生影响。
4.table td{}这种写法表示table中包含的所有td。
二、jquery方面
$()的括号中可以放4种不同的参数
1.参数直接放function,表示页面加载完毕：例如上述例子中jquery代码中的第1行$(function(){})
2.参数可以是css类选择器，并被包装成一个jquery对象。例如：上述例子中jquery代码的第4行$(“tbody tr:even”)
3.参数如果是html文本，可以创建dom节点，并包装成jquery对象。例如：上述例子中jquery代码的第27行$("<input type='text'>")
4.参数可以是一个dom对象，这个方法相当于吧dom对象装换成jquery对象。上述例子中jquery代码的第11行var tdObj = $(this)
本例子中的jquery对象
1.jquery对象后面加css属性，可以设置节点的css属性。例如上述例子中jquery代码中的第4行$("tbody tr:even").css("background-color", "#ece9d8");
2.jquery对象内容中包含了选择器对应的dom节点，以数组保存。
3.jquery对象后面加html方法可以设置或获取节点的html内容。例如上述例子中jquery代码中的第17行var text = tdObj.html()
4.jquery对象后面加val方法，可以获取或设置节点的value值。例如上述例子中jquery代码中第41行var inputtext = $(this).val()
5.jquery对象后面加width方法,可以设置或获取某个节点的宽度。例如上述例子中jquery代码中第27行tdObj.width()
6.jquery对象后面加apppendTo方法可以将一个节点追加到另一个节点所有子节点后面。例如上述例子中jquery代码中第27行appendTo(tdObj)
7.jquery对象后面加trigger方法可以出发某个js事件发生。例如上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")
8.jquery对象后面加children方法可以获得某个节点的子节点，可以制定参数来限制子节点的内容。例如上述例子中jquery代码中第13行tdObj.children("input").length
9.如果选择器返回的jquery对象中包含多个dom节点，在这个对象上注册类似click事件，所有dom节点都会用于此事件。例如上述例子中jquery代码中第9行numId.click；
源码：
前台代码：
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html
<html xmlns="http://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="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/editTable.js"><%--<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.9.1.js"></head>
<body>
<form id="form1" runat="server">
<div>
<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>
</div>
</form>
</body>
</html>
css代码：
复制代码 代码如下:
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;
}
jquery代码
复制代码 代码如下:
$(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);
}
});
});
});
总结：通过这一实例的学习能获得的知识点：
一、html方面
1.table中可以包含thead和tbody
2.表头的内容中可以放th中
3.table{}这种写法称作标签选择器，可以对整个table产生影响。
4.table td{}这种写法表示table中包含的所有td。
二、jquery方面
$()的括号中可以放4种不同的参数
1.参数直接放function,表示页面加载完毕：例如上述例子中jquery代码中的第1行$(function(){})
2.参数可以是css类选择器，并被包装成一个jquery对象。例如：上述例子中jquery代码的第4行$(“tbody tr:even”)
3.参数如果是html文本，可以创建dom节点，并包装成jquery对象。例如：上述例子中jquery代码的第27行$("<input type='text'>")
4.参数可以是一个dom对象，这个方法相当于吧dom对象装换成jquery对象。上述例子中jquery代码的第11行var tdObj = $(this)
本例子中的jquery对象
1.jquery对象后面加css属性，可以设置节点的css属性。例如上述例子中jquery代码中的第4行$("tbody tr:even").css("background-color", "#ece9d8");
2.jquery对象内容中包含了选择器对应的dom节点，以数组保存。
3.jquery对象后面加html方法可以设置或获取节点的html内容。例如上述例子中jquery代码中的第17行var text = tdObj.html()
4.jquery对象后面加val方法，可以获取或设置节点的value值。例如上述例子中jquery代码中第41行var inputtext = $(this).val()
5.jquery对象后面加width方法,可以设置或获取某个节点的宽度。例如上述例子中jquery代码中第27行tdObj.width()
6.jquery对象后面加apppendTo方法可以将一个节点追加到另一个节点所有子节点后面。例如上述例子中jquery代码中第27行appendTo(tdObj)
7.jquery对象后面加trigger方法可以出发某个js事件发生。例如上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")
8.jquery对象后面加children方法可以获得某个节点的子节点，可以制定参数来限制子节点的内容。例如上述例子中jquery代码中第13行tdObj.children("input").length
9.如果选择器返回的jquery对象中包含多个dom节点，在这个对象上注册类似click事件，所有dom节点都会用于此事件。例如上述例子中jquery代码中第9行numId.click；
标签：
jQuery,可以编辑的表格
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“利用jQuery实现可以编辑的表格”评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？