在做后台中遇到的情况，分享下 代码如下:<!DOCTYPE html> <html> <head> <title>表格增行，删行处理</title> <script type="text/javascript" src="http://jt.875.cn/js/jquery"></script> </head> <body> <script> $(function(){ var show_count = 20; //要显示的条数 var count = $("input:text").val(); //递增的开始值，这里是你的ID var fin_count = parseInt(count) + (show_count-1); //结束递增的条件 $("#btn_addtr").cl...
非侵入实现，控制更方便 效果图： 代码如下:<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript practice</title> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <style type="text/css"> table{width:300px;} caption{background:#DCA;} th{background:#FCA;width:50%;} td{text-align:center;} </style> <script type="text/javascript"> $(docu...
jQuery对表格(table)的处理提供了相当强大的功能，比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好，你可以读读这篇文章：jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变，希望它可以对jQuery表格处理的深层学习提供一些帮助。比如我们有这样一个表格： 第一列 第二列 第三列 第四列第一列 第二列 第三列 第四列第一列 第二列 第三列 第四列第...
在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。 该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个<tr>中的html，同时获取每个<tr>标签下对应获取到...
功能： 单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。 主要实现思路： 选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据源代码： HTML代码： 代码如下:<table class="editableTable"> <thead> <tr> <th>Item1</th> <th>Item2</...
表格：合并单元格 参考示例：合并单元格 调用方法：margeCells。如下代码： 代码如下:grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 } ]; grid.margeCells(marges); }
在线演示： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html//左键 代码如下:<html> <head> <title>jQuery 动态增删表格</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>...
查了些资料，写了4个Demo： 1. 隔行着色 代码如下:$(#table1 tr:odd).addClass(odd); $(#table1 tr:even).addClass(even); 效果：2. 高亮含有特定数据的行 代码如下:$("#table2 tr:contains(Fuck)").addClass("selected"); 3. 筛选数据 代码如下:$("#filter").click( function(){ $("#table3 .datarow").hide().filter(":contains(ABCDEFG)").show(); } ); 4. 根据用户输入，即时筛选数据 代码如下:$("#keyword").keyup(f...
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>表格隔行背景和突出显示当前行</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> body{ margin:0 auto; font-size:12px;} .data_list td{ width:100px;} </style> <s...
第一个例子 简介 ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的“显示/隐藏” 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,单元格编辑、行编辑、明细编辑) 支持树表格 支持分组 代码 首先引入基本的css和...
扩展自 $.fn.datagrid.defaults，用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下:<table id="tt"></table> 代码如下:$(#tt).treegrid({ url:treegrid_data.json, treeField:name, columns:[[ {title:Task Name,field:name,width:180}, {field:persons,title:Persons,width:60,align:right}, {field:begin,title:Begin Date,width:80}, {field:end,title:End Date,width:80} ]] }); 特性 其特性扩展...
扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 代码如下:<table id="tt"></table> 代码如下:$(#tt).datagrid({ url:datagrid_data.json, columns:[[ {field:code,title:Code,width:100}, {field:name,title:Name,width:100}, {field:price,title:Price,width:100,align:right} ]] }); 数据表格（DataGrid）的特性<?XML:NAMESPACE PREFIX = O ...
扩展自 $.fn.datagrid.defaults，用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下:<table id="pg"></table> 代码如下:$(#pg).propertygrid({ url:propertygrid_data.json, showGroup:true }); 特性 其特性扩展自 datagrid，下列是为 propertygrid 增加的特性。 名称<?XML:NAMESPACE PREFIX = O />类型说明默认值showGroupboolean定义是否显示特性组。falsegroupFieldstring定义组的字段名。grou...
我的思路是这样的： 1.对任何一个 table, tr 都可以添加编辑、删除功能——功能独立 2.可以自动的完成编辑、取消功能，如点击编辑， 表格内容自动变成编辑框、下拉框等， 点击取消结束编辑状态 3.添加删除、确定(即更新)事件——只需要添加自己服务端的删除、更新代码就可以 4.能够自定义设置可编辑列，不可编辑列——方便定制编辑功能下面是我实现的功能代码： editable.js 代码如下:/* code: editable.js version: v1.0 date: 2...
这里我使用Jquery库，这个就不用过多介绍了，有几个知识点： - 选择器tr:eq(index)，表示选择指定index索引的tr元素，index索引从0开始 - tempRow.parent()，表示返回tempRow对象的父节点对象 - $("<td/>").prependTo()，表示将一个td元素添加到指定元素的内容头部 实例代码 index.html 代码如下:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u...