实现可编辑的表格demo： 实例图： 代码： 代码如下: 结果为集合。 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属性存储键...
大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。1.DataTables-强大的jQuery表格插件DataTables是提供了大量特性的强大jQuery表格插...
jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。Chromatable JQuery Plugin - 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整，分页，排序，行列式样等功能（演示）。JQTreeTable - 在表格中加入树形结构Scrollable HTML tab...
jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。Chromatable JQuery Plugin - 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整，分页，排序，行列式样等功能（演示 ）。JQTreeTable - 在表格中加入树形结构Scrollable HTML ta...
段时间做项目时候由于需要显示一个列表，但是由于数据太多在滚动的时候表头必须冻结住，所以就写了下面这个脚本（曾经在网上也找过相应的脚本，但是不怎么理想所以就自己写了，但是目前由于项目仅仅用到了表头的冻结，而不需要指定列冻结所以目前只能算个不完整的脚本，不过一般的仅仅需要表头冻结就可以使用了），现在先看看截图： 这样实现了表头的冻结，下面表体内容可以自由滚动 看下代码： //为jquery扩展一个CloneTableHeade...
效果图: 代码如下: jQuery EasyUI var users = {total:6,rows:[ {no:1,name:'用户1',addr:'山东济南',email:'user1@163.com',birthday:'1/1/1980'}, {no:2,name:'用户2',addr:'山东济南',email:'user2@163.com',birthday:'1/1/1980'}, {no:3,name:'用户3',addr:'山东济南',email:'user3@163.com',birthday:'1/1/1980'}, {no:4,name:'用户4',addr:'山东济南',email:'user4@163.com',birthday:'1/1/1980'}, {no:5,name:'用户...
本文实例讲述了基于jQuery实现的无刷新表格分页。分享给大家供大家参考，具体如下： 效果图如下：html结构：css样式：html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica,sans-serif,宋体;margin: 0;padding: 0} table{border-spacing: 0;border-collapse: collapse;} .datatable {width: 100%;border-style: none;background-color: #fff;margin-bottom: 20...
本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法。分享给大家供大家参考，具体如下： 此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下：表格隔行变色且鼠标滑过高亮显示table{border-collapse:collapse;border:none;width:20%;} table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;} .evenRow{background:#f0f0f0;} .oddRow{background:#ff0;}...
本文实例讲述了jQuery实现获取table表格第一列值的方法。分享给大家供大家参考，具体如下： 先来看看运行效果截图：完整代码如下：无标题页$(function(){$("#Button1").click(function(){var cols="";$("#tb tr").each(function(){var text = $(this).children("td:first").text();cols+=text+"|";})cols=cols.length>0cols.substring(0,cols.length-1):"";alert(cols);}) })IdNameAddress11leafgz22flowergz更多关于jQuery相关内容...
最终效果图： 简单来看一下其中的主要部分：HTML：.td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } CSS：2013春节聚会收支统计 姓名 吃饭 KTV 烧烤 支出 应付 周竞成 ...... JavaScript：var data = [ { picture : "http://ww1.sinaimg.cn/mw690/51baa38egw1dzl6l2hjchj.jpg", name : "周竞成", leftTime : "二月五号", phone : "186****2296", qq : "", workedIn ...
DataTables是一个jQuery的表格插件，本文为大家分享了表格插件datatables用法，介绍了基础的部分知识，具体内容如下 一、初始化 在页面中Column 1Column 2Row 1 Data 1Row 1 Data 2Row 2 Data 1Row 2 Data 2js中初始化$(document).ready( function () {$('#table_id').DataTable(); } );二、常用配置 在初始化的时候可以通过一些常用的配置项对表格进行配置，这是我在项目中实际用到的$("#vivo_table_list").dataTable({pageLength...
本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 合并前：合并后：具体代码如下：/** * desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格 * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data * @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数...
editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作，其中可以设置参数，如： operatePos 用于设置放置操作的列，从0开始，-1表示以最后一列作为放置操作的列；（这里的操作包括 编辑当前行、在当前行下添加一行、删除当前行） handleFirst 设置表格的第一行是否作为操作的对象，true为真，false为假； edit、save、cancel、add、confirm、del 分别设置显示操作的操作名，默认显示“编辑”、“保存”、“取消”、“添加...
官方网站：http://www.flexigrid.info/ 今天比较空闲，所以花了点时间用flexigrid做了简单例子，基于PHP，可以直接在支持PHP的环境里实验效果。 下载地址：http://xiazai.jb51.net/201007/yuanma/flexigrid.rar
固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧:HTML - 模板代码： 代码如下: 姓名 性别 年龄 住址 {姓名} {性别} {年龄} {住址} jsascript代码： 代码如下: //测试数据 var dataJsonStr={tablename:"",rows:[{"姓名":"曹操","性别":"男","年龄":"51","住址":"许昌"},{"姓名":"诸葛亮","性别":"男","年龄":"40","住址":"南阳"},{"姓名":"周瑜","性别":"男","年龄":"40","...