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

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

jQuery表格排序组件,利用jQuery实现可以编辑的表

一、引进文件

前日上学了选拔jQuery完成能够编写制定的报表这一个例子。那些例子供给是那样的:在前台的报表中单击单元格便可修改在这之中的剧情,回车键保存修改的剧情,esc撤除保存的开始和结果。原理:单击客商端表格单元格时,在单元格中加多二个文本框,并将单元格中本来的剧情赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格。

复制代码 代码如下:

源码:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<!-- 引进以下样式则表头现身排序图标,同不寻常候引进图片 -->
<link href="css/style.css" rel="stylesheet" type="text/css" >

前台代码:

功效如图:
威尼斯官网 1 
二、标准的HTML表格,必得回顾thead和tbody标签

复制代码 代码如下:

复制代码 代码如下:

<%@ 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>

<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhangsan</td>
<td>boy</td>
<td>beijing</td>
</tr>
<tr>
<td>lisi</td>
<td>girl</td>
<td>shanghai</td>
</tr>
<tr>
...略
</tr>
</tbody>
</table>

css代码:

三、设置table可排序

复制代码 代码如下:

复制代码 代码如下:

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

$(document).ready(function(){
//第一列不实行排序(索引从0开始)
$.tablesorter.defaults.headers = {0: {sorter: false}};
$(".tablesorter").tablesorter();
});

jquery代码

合菲律宾语档:

复制代码 代码如下:

增加补充表达:

$(function () {
//找到表格中除去第一个tr以外的装有偶数行
//使用even为了通过tbody tr再次来到全部tr成分
$("tbody tr:even").css("background-color", "#ece9d8");
//找到全体的学号单元格
var numId = $("tbody td:even");

在动用进度遇到的四个主题材料,小编的报表数据是因此ajax获取的,首页进行排序的时候没难点

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

当举行下一页排序的时候,会把上页的多少也再也展现出来,消除那个标题能够在你ajax获取数据之后

小结:通过这一实例的求学能赢得的知识点:

接触"update"事件,代码如下:

一、html方面

复制代码 代码如下:

1.table中得以包含thead和tbody

$(".tablesorter").trigger("update");

2.表头的原委中能够放th中

上述难点着实脑瓜疼了相当久,刚开始用的官方网站络的Pager plugin,发掘这一个不太方便。

3.table{}这种写法称作标签选取器,能够对任何table爆发影响。

又英特网查资料 整理以下代码:

4.table td{}这种写法表示table中富含的有所td。

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

关键词: 澳门威利斯人