【BootStrap和jQuery相结合实现可编辑表格_jquery】教程文章相关的互联网学习教程文章

基于jquery的表格排序

很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的。 注:这里只是拿出了一部分代码来,查看演示demo 文档载入后给'th'添加click事件。 1. $('th').click(function(){ var date1=(new Date()).getTime() var dataType=$(this).attr('dataType'); 找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class来定义,但是我觉...

基于jquery的实现简单的表格中增加或删除下一行

代码如下: html 代码如下:<div> <table> <tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><td>2222</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><td>4444</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> </table> </d...

基于JQuery的一句代码实现表格的简单筛选【图】

效果图:代码: 代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Script/jquery-1.3.2-vsdoc.js" type="text/jav...

一个可绑定数据源的jQuery数据表格插件【图】

固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧:HTML - 模板代码: 代码如下:<table id="test"> <tr class="header"> <td style="width: 100px;" sort=true> 姓名 </td> <td style="width: 100px;" sort=true> 性别 </td> <td style="width: 100px;" sort=true> 年龄 </td> <td style="width:200px;" sort=true> 住址 </td> </tr> <tr class="itemtemplate"> <td editable=true> {姓名} </td> <td...

jQuery EasyUI中对表格进行编辑的实现代码【图】

效果图: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascri...

基于jQuery的固定表格头部的代码(IE6,7,8测试通过)【图】

段时间做项目时候由于需要显示一个列表,但是由于数据太多在滚动的时候表头必须冻结住,所以就写了下面这个脚本(曾经在网上也找过相应的脚本,但是不怎么理想所以就自己写了,但是目前由于项目仅仅用到了表头的冻结,而不需要指定列冻结所以目前只能算个不完整的脚本,不过一般的仅仅需要表头冻结就可以使用了),现在先看看截图: 这样实现了表头的冻结,下面表体内容可以自由滚动 看下代码: //为jquery扩展一个CloneTableHeade...

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 表格工具集【图】

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的表格操作插件【图】

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

jquery学习笔记二 实现可编辑的表格【图】

实现可编辑的表格demo: 实例图: 代码: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/jscript" src="jquery-1.4.2.min.js"></script> <script type="text/jscript" language="javascript"> //简化的ready写法:页面加载完成时候...

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

没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 代码如下:<div id="formdiv" align="center"> firstname:<input type="text" id="firstname"/> lastname:<input type="text" id="lastname"/> age:<input type="text" id="age"/> percent:<input type="text" id="percent"/> <input type="button" value="确定" id="sure"/> </div> <table border="0" cellpadding="0" cellspacing="0" align="c...

jquery 交替为表格添加样式的代码【图】

下面就是我的“作品”啊,只是简单的实现其功能,并未做其他的功能啊 运行后,需要刷新下, 上面得代码比较简单,更多的例子,可以搜索脚本之家以前发布的文章。表头表头表头 脚本之家jb51.net4561263 1234567898794561263 1234567898794561263 1234567898794561263 1234567898794561263 1234567898794561263 1234567898794561263 1234567898794561263 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

下面是js Code: 代码如下:$(function() { // 相当于在页面中的body标签加上onload事件 $(".caname").click(function() { // 给页面中有caname类的标签加上click函数 var objTD = $(this); var oldText = $.trim(objTD.text()); // 保存老的类别名称 var input = $("<input type=text value=" + oldText + " />"); // 文本框的HTML代码 objTD.html(input); // 当前td的内容变为文本框 // 设置文本框的点击事件失效 input.click(fun...

jquery 双色表格实现代码

//www.gxlcms.com/article/21027.htm不多说了,直接给代码 代码 代码如下:<html> <head> <title>双色表格</title> <style type="text/css"> <!-- table { border:solid 1px black; text-align:center; border-spacing:0px; } th,td { border:solid 1px black; width:100px; } --> </style> <script src="lib/jquery.js" type="text/javascript"></script> <script type="text/javascript" > $().ready(function() { $(tr:has(th))...

jquery tablesorter.js 支持中文表格排序改进

代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序。 没办法,能力有限,只能。。。 代码如下://转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return parseFloat(sValue); case "date": return new Date(Date.parse(sValue)); default: return sV...