澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-09-11 06:10 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

利用jQuery实现可以编辑的表格,实现可编辑的表

一、html方面

您恐怕感兴趣的稿子:

  • jQuery达成的可编辑表格完整实例
  • 依照Bootstrap使用jQuery完成简单可编辑表格
  • BootStrap和jQuery相结合贯彻可编辑表格
  • jQuery PHP达成可编辑表格字段内容并实时保存
  • JQuery达成可编写制定的表格实例讲授(2)
  • 基于JQuery制作可编写制定的报表特效
  • jQuery(非HTML5)可编辑表格达成代码
  • 据说PHP Jquery制作的可编写制定的表格的代码
  • 用Jquery完毕可编辑表格并用AJAX提交到服务器修改数据
  • jQuery一步一步完成跨浏览器的可编辑表格,协助IE、Firefox、Safari、Chrome、Opera
  • jQuery完毕能够编写制定的报表实例详解【附demo源码下载】

4.参数能够是贰个dom对象,那么些措施约等于吧dom对象装换来jquery对象。上述例子中jquery代码的第11行var tdObj = $(this)

实例图:
图片 1

7.jquery指标前面加trigger方法能够起身某些js事件发生。比方上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")

贯彻可编写制定的报表demo:

3.参数要是是html文本,能够创制dom节点,并打包成jquery对象。举例:上述例子中jquery代码的第27行$("<input type='text'>")

知识点:
1.$(function() {})是$(document).ready(function() {})的简写。
2.$("tbody td:even")中“:”表示过滤,even为偶数函数,筛选规范能够在救助文书档案的选用器中搜索。此句表示回去tbody内的偶数td,结果为集聚。
3.在事件中$(this)将回来此控件的jquery对象。
4.children("input")表示取全部子成分包涵input的jquery对象,结果为集聚。
5.css("border-width", "0")表示设置css属性的值。
6.trigger("focus").trigger("select")表示设置事件先触发focus,再触发select。
7.keyup(function(event) {var keycode = event.which;})表示注册键盘事件,参数event的which属性存款和储蓄键盘新闻。

//给单元格注册鼠标点击事件
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);
}
});
});
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head runat="server">
<title></title>
<script type="text/jscript" src="jquery-1.4.2.min.js"></script>
<script type="text/jscript" language="javascript">
//简化的ready写法:页面加载成功时候调用
$(function() {
//将tbody内的偶数tr的背景颜色设置为#ECE9D8
$("tbody tr:even").css("background-color", "#ECE9D8");
//将tbody内的偶数td设置为numTd
var numTd = $("tbody td:even");
//给这么些单元格注册鼠标点击的事件
numTd.click(function() {
//取点击到成分的jquery对象
var tdObj = $(this);
//假若点击的成分包括input控件则不推行click管理
if (tdObj.children("input").length > 0) {
return false;
}
//取td内容附值到text
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);
//设置触发器先触发focus事件再触发select事件
inputObj.trigger("focus").trigger("select");
//是文本框插入之后就被入选
inputObj.click(function() {
return false;
});
//注册keyup事件
inputObj.keyup(function(event) {
//获取当前按下键盘的键值
var keycode = event.which;
//管理回车的动静
if (keycode == 13) {
//获取当当前文本框中的内容
var inputtext = $(this).val();
//将td的从头到尾的经过退换成文本框中的内容
tdObj.html(inputtext);
}
//处理esc的情况
if (keycode == 27) {
//将td中的内容还原成text
tdObj.html(text);
}
});
});
});
</script>
<style type="text/css">
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;
}
</style>
</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>
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>
</form>
</body>
</html>

1.table中能够包含thead和tbody

复制代码 代码如下:

5.jquery目的后边加width方法,能够安装或获得某些节点的拉长率。比如上述例子中jquery代码中第27行tdObj.width()

代码:

9.如若采纳器重返的jquery对象中富含多个dom节点,在这些目的上登记类似click事件,全数dom节点都会用来那件事件。举例上述例子中jquery代码中第9行numId.click;

4.jquery对象后边加val方法,能够收获或设置节点的value值。比如上述例子中jquery代码中第41行var inputtext = $(this).val()

4.table td{}这种写法表示table中蕴藏的兼具td。

你恐怕感兴趣的稿子:

  • jQuery EasyUI中对表格实行编辑的兑今世码
  • easyui-edatagrid.js落成回车键甘休编辑作用的实例

源码:

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;
}

1.参数间接放function,表示页面加载完毕:比如上述例子中jquery代码中的第1行$(function(){})

复制代码 代码如下:

css代码:

总括:通过这一实例的求学能收获的知识点:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html
<html xmlns=";
<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">
<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>

本文由澳门威利斯人发布于网络资讯,转载请注明出处:利用jQuery实现可以编辑的表格,实现可编辑的表

关键词: 澳门威利斯人