jquery 操作表格实现代码(多种操作打包)

650) this.width=650;" border=0>

650) this.width=650;" border=0>

代码很简单,在附件中,各位可以下载后直接运行.


代码如下:

<script type="text/javascript" language="javascript">
$(function() {
jQuery.fn.alternateRowColors = function() { //做成插件的形式
$('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变色 奇数行
$('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变色 偶数行
return this;
};
$('table.myTable').each(function() {
var $table = $(this); //将table存储为一个jquery对象
$table.alternateRowColors($table); //在排序时隔行变色
$('th', $table).each(function(column) {
var findSortKey;
if ($(this).is('.sort-alpha')) { //按字母排序
findSortKey = function($cell) {
return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();
};
} else if ($(this).is('.sort-numeric')) { //按数字排序
findSortKey = function($cell) {
var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));
return isNaN(key) ? 0 : key;
};
} else if ($(this).is('.sort-date')) { //按日期排序
findSortKey = function($cell) {
return Date.parse('1 ' + $cell.text());
};
}
if (findSortKey) {
$(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() {
//反向排序状态声明
var newDirection = 1;
if ($(this).is('.sorted-asc')) {
newDirection = -1;
}
var rows = $table.find('tbody>tr').get(); //将数据行转换为数组
$.each(rows, function(index, row) {
row.sortKey = findSortKey($(row).children('td').eq(column));
});
rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -newDirection;
if (a.sortKey > b.sortKey) return newDirection;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');
//实现反向排序
if (newDirection == 1) {
$sortHead.addClass('sorted-asc');
} else {
$sortHead.addClass('sorted-desc');
}
//调用隔行变色的函数
$table.alternateRowColors($table);
//移除已排序的列的样式,添加样式到当前列
$table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
$table.trigger('repaginate');
});
}
});
});
});
//分页
$(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1)
.bind('click', { newPage: page }, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table);
$table.trigger('repaginate');
$pager.find('span.page-number:first').addClass('active');
});
});
</script>

打包下载地址

(0)

相关推荐

  • JQuery对表格进行操作的常用技巧总结

    1.表格奇数行和偶数行分别添加样式 复制代码 代码如下: $(function(){ $('tr:odd').addClass("odd"); $('tr:even').addClass("even"); }); 不算表的头部 复制代码 代码如下: $(function(){ $('tbody>tr:odd').addClass("odd"); $('tbody>tr:even').addClass("even")

  • jquery 表格分页等操作实现代码(pagedown,pageup)

    没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码 代码如下: <div id="formdiv" align="center"> firstname:<input type="text" id="firstname"/> lastname:<input type="text" id="lastname"/&g

  • JQuery 表格操作(交替显示、拖动表格行、选择行等)

    JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码 代码如下: <script type='text/javascript'><!--     $(function(){         //交替显示行         $('#alternation').click(function(){                             $('tbody > tr:odd', $('#example')).toggleClass('alternatio

  • 超级简单的jquery操作表格方法

    本文实例讲述了超级简单的jquery操作表格方法.分享给大家供大家参考.具体实现方法如下: 利用jquery给指定的table添加一行.删除一行 复制代码 代码如下: <script language="javascript" src="./jquery.js"></script> <table border="1px #ooo" id="test" name="test" c

  • JQuery操作表格(隔行着色,高亮显示,筛选数据)

    查了些资料,写了4个Demo: 1. 隔行着色 复制代码 代码如下: $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 复制代码 代码如下: $("#table2 tr:contains('Fuck')").addClass("selected"); 3. 筛选数据 复制代码 代码如下: $("#filter"

  • 基于jQuery的表格操作插件

    大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式.但是我们在日常应用中仍然要用到table表格,其中最好的例子就是对照表.今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示.排序.筛选和操控.如jQuery表格排序插件.jQuery表格拖拽插件.jQuery树形表格插件.设置颜色.点击.替换等效果. 1.DataTables-强大的jQuery表格插件 DataTables是提供了大量特性的强大jQuery表格插件.例

  • jQuery操作表格(table)的常用方法、技巧汇总

    以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){    $(this).children('td').addClass('hover')}, function(){    $(this).children('td').removeClass('hover')}); 方法二: 复制代码 代码如下: $("#table1 tr:gt(0)").hover(function()

  • 使用jQuery操作HTML的table表格的实例解析

    最终效果图: 简单来看一下其中的主要部分: HTML: .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } CSS: <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>姓名</th> <th>

  • JQuery实现动态操作表格

    最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title

  • jquery 操作表格实现代码(多种操作打包)

    650) this.width=650;" border=0> 650) this.width=650;" border=0> 代码很简单,在附件中,各位可以下载后直接运行. 复制代码 代码如下: <script type="text/javascript" language="javascript"> $(function() { jQuery.fn.alternateRowColors = function() { /

  • jQuery实现表格的增、删、改操作示例

    本文实例讲述了jQuery实现表格的增.删.改操作.分享给大家供大家参考,具体如下: 这里实现的是在jQuery中通过按钮的形式,对表格进行的一些基本操作,可以实现表格的增删改操作,并实现对鼠标事件监听,实现表格的高亮行操作. <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery表格操作</title> <script src="http://libs.baidu

  • 全面解析DOM操作和jQuery实现选项移动操作代码分享

    DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> <

  • 同域jQuery(跨)iframe操作DOM(示例代码)

    frame目前还是比较流行的,许多地方都通过它来实现特殊的情况.比如说传统的上传.select在ie6下.代理.跨域等等.今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面. 复制代码 代码如下: <iframe src="a.php" id="aa"></iframe> <iframe src="b.php" id="bb"></iframe>

  • Python中join()函数多种操作代码实例

    这篇文章主要介绍了Python中join()函数多种操作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Python中有.join()和os.path.join()两个函数,具体作用如下: . join(): 连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串 os.path.join(): 将多个路径组合后返回 对序列进行操作(分别使用' ' .' - '与':'作为分隔符) a=['1aa','

  • 使用Python制作一个数据预处理小工具(多种操作一键完成)

    在我们平常使用Python进行数据处理与分析时,在import完一大堆库之后,就是对数据进行预览,查看数据是否出现了缺失值.重复值等异常情况,并进行处理. 本文将结合GUI工具PySimpleGUI,来讲解如何制作一款属于自己的数据预处理小工具,让这个过程也能够自动化!最终效果如下 本文将分为三部分讲解: 制作GUI界面 数据处理讲解 打包与测试 主要涉及将涉及以下模块: PySimpleGUI pandas matplotlib 一.GUI界面制作 思路 老规矩,先讲思路再上代码,首先还是说一

  • 使用jquery datatable和bootsrap创建表格实例代码

    使用jquery-datatable插件 bootstrap前端框架 json 一.创建demo.html 代码块 代码块语法遵循标准markdown代码,例如: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pref

  • Vue+jquery实现表格指定列的文字收缩的示例代码

    本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下: 效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列 代码是这样的: <el-table-column width="250" align="center" label="比较基准"> <templa

随机推荐