本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下： 功能： 创建一个表格，用户单击某个单元格后，可以直接修改单元格文本。 在编辑状态下，用户可按回车键确认修改，按ESC键撤销修改。 效果如下图：思路： 当用户点击某个单元格后，立即向该单元格内插入一个文本框，将它的宽、高都设置成与单元格相的数值。用户确认输入后，清空该单元格内的所有HTML代码，然后把内容设置为用户刚刚输入的文本。 H...
本文实例讲述了jquery实现表格本地排序的方法。分享给大家供大家参考。具体实现方法如下：代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jquery 表格排序</title> <style type="text/css"> thead { background-color: Blue; color: White; } tr.odd { background-color: #ddd; } tr...
本文实例讲述了jQuery实现表格颜色交替显示的方法。分享给大家供大家参考。具体实现方法如下：代码如下:<!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> <title>jQuery实现表格颜色的交替显示</title> <script type="text/javascript" src="js/jquery1.3.2.js"></script> <script type="text/ja...
本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下： 昨天做页面表格行动态添加和删除，看了无数的介绍，发现了一个好东东，JQuery。用它实现起来还真的是很方便，这个是我用到我们平台的一个方法。代码如下://记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href=javascript:void(0); class=content_del onclick=deleteBatc...
jQuery实现的拖动调整表格td单元格的大小: 在实际应用中，可能有这样的需求，那就是需要调整td单元格的大小。 也许是为了便于观察，也许是其他原因，反正这样的需求是有的，下面就分享一段能够实现此功能的代码。 代码实例如下:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>脚本之家</title> <style type="text/css" > table { border-collapse: collapse; } td { text-align: center; } </style>...
最近做了个项目，其中项目要求：点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按Esc可取消编辑 2个小伙伴给出了2中解决方案，大家来看看哪种更合适呢？ 第一种单击表格可以编辑的方法代码如下: //相当于在页面中的 body标签加上onload事件 $(function() { //找到所有的td节点 var tds = $("td"); //给所有的td添加点击事件 tds.click(function() { //获得当前点击的对象 var td ...
本文实例讲述了超级简单的jquery操作表格方法。分享给大家供大家参考。具体实现方法如下： 利用jquery给指定的table添加一行、删除一行代码如下:<script language="javascript" src="./jquery.js"></script> <table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%"> <tr id="1"><td width="30%">1</td> <td width="30%">2</td> <td width="30%">3</td></tr> <tr id="2"><td wi...
插件名称命名为:jquery.tableresize.js，代码如下：代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件，能够使table的各列可以左右拉伸，从而使宽度变小或变大 用法： 单个table：$("#table_id").tableresize(); 页面所有table：$("table").tableresize(); */ (function ($) { $.fn.tableresize = function () { var _document = $("body"); $(this).each(function () { ...
jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销，而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程，这个时候，我也用这个简单的纯实现了。任务是从一个HTML表使用一些时髦的效果，只要按一下该行的行。以下是实现这一目标的jQuery代码。 $(document).ready(function() { $("#sample tr").click(function() { //change the background color to red be...
jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销，而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程，这个时候，我也用这个简单的纯实现了。任务是从一个HTML表使用一些时髦的效果，只要按一下该行的行。以下是实现这一目标的jQuery代码。 $(document).ready(function() { $("#sample tr").click(function() { //change the background color to red be...
类似于桌面程序中的表格拖动表头的效果，当鼠标停留在表头边框线上时，鼠标会变成表示左右拖动的形状，接着拖动鼠标，会在表格中出现一条随鼠标移动的竖线，最后放开鼠标，表格列宽会被调整。最近比较空闲，便自己动手尝试实现，在此分享下小小的成果。 首先需要如图所示的鼠标图标文件，在自己的硬盘中搜索*.cur，肯定能找到。 为了能在所有需要该效果的页面使用，并且不需要更改页面任何HTML，我把所有的代码整合在 $(document)....
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。 官方网站及其下载地址：http:/www.datatables.net 当前最新版为1.10.2，读者可点此本站下载。 其主要特点如下： 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的...
本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。 代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script> <mce:sty...
类似于桌面程序中的表格拖动表头的效果，当鼠标停留在表头边框线上时，鼠标会变成表示左右拖动的形状，接着拖动鼠标，会在表格中出现一条随鼠标移动的竖线，最后放开鼠标，表格列宽会被调整。最近比较空闲，便自己动手尝试实现，在此分享下小小的成果。 首先需要如图所示的鼠标图标文件，在自己的硬盘中搜索*.cur，肯定能找到。 为了能在所有需要该效果的页面使用，并且不需要更改页面任何HTML，我把所有的代码整合在 $(document)....
功能实现：点击添加按钮，表格增加一行并给其name属性赋予的值，方便获取 点击删除，自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows);var e_id = tr.insertCell(0); e_id.innerHTML = <input type="text" name="e_id + count + " size="7" />;var class_id = tr.insertCell(1); class_id.innerHTML = ;var memo ...