jQuery对表格(table)的处理提供了相当强大的功能，比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好，你可以读读这篇文章：jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变，希望它可以对jQuery表格处理的深层学习提供一些帮助。比如我们有这样一个表格： 第一列 第二列 第三列 第四列第一列 第二列 第三列 第四列第一列 第二列 第三列 第四列第...
在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。 该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个中的html，同时获取每个标签下对应获取到的列号的...
非侵入实现，控制更方便 效果图： 代码如下: javascript practice table{width:300px;} caption{background:#DCA;} th{background:#FCA;width:50%;} td{text-align:center;} $(document).ready(function(){ odd= {"background":"#EDA","color":"#3F5"};//奇数样式 even={"background":"#2DA","color":"#875"};//偶数样式 odd_even("#table_test",odd,even); }); function odd_even(id,odd,even){ $(id).find("tr").each(f...
在做后台中遇到的情况，分享下 代码如下: 表格增行，删行处理 $(function(){ var show_count = 20; //要显示的条数 var count = $("input:text").val(); //递增的开始值，这里是你的ID var fin_count = parseInt(count) + (show_count-1); //结束递增的条件 $("#btn_addtr").click(function(){ if(count { $("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行 $("tr:last td input:first").val(++count); //改...
代码如下: 筛选： 姓名性别地址 一班 大爷男10武汉1 大爷男9武汉2 大爷男8武汉3 二班 大爷男7武汉4 大爷男6武汉5 大爷男5武汉6 大爷男4武汉7 三班 大爷男3武汉8 大爷男2武汉9 大爷男1武汉10 $(function(){ $("#sea").keyup(function(){ $("#se tbody tr").hide().filter(":contains('"+$(this).val()+"')").show(); }).keyup(); }); 代码如下: // jquery表格内容筛选 $(function(){ $('tr.parent').click(function(...
在 Excel 中可进行的操作，你几乎都可以在网页中做到，如拖动复制、Ctrl+C 、Ctrl+V 等等。另外在浏览器支持方面，它支持以下的浏览器 IE7+, FF, Chrome, Safari, Opera。 如何使用： 首先在页面中引入 jQuery 框架和 Handsontable 插件的相关 JS 和 CSS 文件，以下列出的两个是必要的，还有其它的是可选的，如果需要某个功能时就（参看demo）加上。代码如下: 然后添加一个用于呈现 Excel 编辑表格的 DIV 层代码...
[css] 代码如下: .height{ background:#666666; /*背景颜色为灰色*/ } tr{ cursor: pointer; /*手形*/ } .height{ background:#666666; /*背景颜色为灰色*/}tr{ cursor: pointer; /*手形*/ }[html] 代码如下: 姓名性别居住地 张三男北京 李四男上海 王五女深圳 赵六女北京 孙七男上海 姓名性别居住地 ...
1.关于指定表格指定列隐藏显示 代码如下: $(":checkbox[name*=month]").each(function(){ if(!$(this).attr("checked")){ var colnum = $(this).val(); $("#listPage").find(tr).find("td:eq(" + colnum.toString() + ")").hide(); $("#listPage").find(tr).find("th:eq(" + colnum.toString() + ")").hide(); } else { var colnum = $(this).val(); $("#listPage").find(tr).find("td:eq(" + colnum.toString() + ")").show(); $...
代码： 代码如下: merge.html function merge1(){ //可实现单元格，通过给 开始cell的比较 var totalRow = $("#tbl").find("tr").length; var totalCol = $("#tbl").find("tr").eq(0).find("td").length; for(var col=totalCol-1;col>=1;col--){ spanNum =1; startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col); for(var row = totalRow-1;row>=1;row--){ targetCell = $("#tbl").find("tr").eq(row-...
代码如下:[html] JQuery表格内容过滤 table{ border:0;border-collapse:collapse;} div{font:normal 12px/17px Arial;} td{ font:normal 12px/17px Arial;padding:2px;width:100px;} th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;} .even{ background:#FFF38F;} /* 偶数行样式*/ .odd{ background:#FFFFEE;} /* 奇数行样式*/ .selected{ background:#FF6500;color...
【问题原因】 这个应该是 jquery.datatable 控件本身的一个缺陷。 该控件中的checkbox小插件的id是写死的，所以当有多个datatable引用到一个页面中的时候，全选事件会匹配全部的datatable，所以造成全部多个表格的checkbox被都被选中。 【解决方法】 所以最好是修改jquery.datatable控件，给生成的每个datatable下的checkbox赋 予不同的id，因为datatable的id是不一样的，所以可以把 datatable的id作为 checkbox的前缀组成一个唯一...
通过jquery技术来操作表格是件简单的事，通过jquery的语法，可以很轻松的完成表格的隔行换色，悬浮高亮，在实际的应用中可能会出现表格中带复选框的，删除时，将复选框所在的行的记录删除。在这的地方，可以加个特效，单击某行的同时将该行的复选框选中，该行的背景色也高亮显示。这样给人的感觉非常好。 效果如下： 我做的这里有两个功能： 功能1、单击某行，该行的复选框被选中，同时改变一下背景色。 功能2、单击全选/全不选标...
上篇博客写的是复选框的，这次写的是单选框的，有时查询的时候，只能选择一条记录，如果将选中的这条记录的行高亮显示，同时该行的单选按钮也被选中了，这样会提高用户的体验的。如今的时代，就是用户体验的时代。 效果如下： CSS文件如下如下所示： 代码如下: .selected{ background:#FF6500; color:#fff; }： 这次的js文件的代码就变得更简单了，如下所示： 代码如下: /** * 设置含有单选按钮的表格的背景颜色 */ $(document)...
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果图如下： 源码（Demo）打包下载 html代码如下： 代码如下: .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size: 12px; } .normalEvenTD{ background: #DFD8D8; } .normalOddTD{ background: #FFFFFF; } .hoverTD{ background-color: #eafcd5; he...
jQuery hover事件 hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（...