jquery关于表格及表格列隐藏和显示问题探讨

本文为大家详细介绍下关于指定表格及指定列的隐藏或显示、获取表格的列数等等表格相关的使用技巧,感兴趣的朋友可以参考下哈,希望对大家有所帮助
 

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();
$("#listPage").find('tr').find("th:eq(" + colnum.toString() + ")").show();
}
});

或者:

复制代码 代码如下:

$(document).ready(function(){
$("td:eq(2)",$("tr")).hide();
$("td:eq(3)",$("tr")).hide();
$("td:eq(4)",$("tr")).hide();
$("#button1").click(function(){
$("td:eq(2)",$("tr")).toggle(1000); //设置为0表示不用动画 ,1000就1秒的时间来展示或者隐藏
$("td:eq(3)",$("tr")).toggle(1000);
$("td:eq(4)",$("tr")).toggle(1000);
});
});

2.获取表格的列数

复制代码 代码如下:

var col = $("#listPage").find("th").prevAll().length;//获取表格列数
for(var i=0;i<=col;i++){
if($("#listPage").find('tr').find("th:eq(" + i.toString() + ")").css("display")=='none') {//判断列是否被隐藏
$("input[value="+i+"]").attr("checked",false);
} else {
$("input[value="+i+"]").attr("checked",true);
}
}

3.在jquery中如果想查找一个可见的元素用 :visible
例如$("tr:visible")
如果想找不显示的,可以用
$("tr:not(':visible')")就行了。

时间: 2024-10-05 01:22:28

jquery关于表格及表格列隐藏和显示问题探讨的相关文章

jquery关于表格及表格列隐藏和显示问题探讨_jquery

1.关于指定表格指定列隐藏显示 复制代码 代码如下: $(":checkbox[name*=month]").each(function(){ if(!$(this).attr("checked")){ var colnum = $(this).val(); $("#listPage").find('tr').find("td:eq(" + colnum.toString() + ")").hide();

excel表格ab列隐藏了怎么恢复

  excelab列隐藏恢复步骤如下: excel表格中隐藏了A.B列,若要恢复,选择列,右键取消隐藏即可,关键是选择列这一步,一定要选对,否则不成功,见如下图文说明: ①鼠标点住C列往左拖(此时鼠标为小黑箭头),拖到出现3C松开鼠标,此时表明选择了3列,即ABC列.(不能单独点击C列,否则无法进行第2步) ②鼠标在C列点右键,选择"取消隐藏" ③此时,隐藏的AB两列就出现了.

表格拖动调整列宽JQuery代码(1/2)

表格拖动调整列宽jquery代码 为了能在所有需要该效果的页面使用,并且不需要更改页面任何html,我把所有的代码整合在  $(document).ready(function() {});  中,并写入一个独立的js文件. 用一个1像素宽的div来模拟一条竖线,在页面载入后添加到body元素中 $(document).ready(function() {      $("body").append("<div id="line" style=&qu

jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)_AJAX相关

表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人.但是,无论如何,都掩饰不了那些包装下的死板. 那么如何让那些死板的数据 更具有可读性.可用性,能够让我们那些数据在"动"呢? 下面我们使用jquery+ajax 来为表格注入些活力.主要实现的目的就是:将表格的列标题转化为按钮,点击不同的列标题,便按相应的列对数据进行排序.比如学生信息表,我点击"生日"列,这张表便按生日排序将结果呈现在我们面前.使用ajax来调用本页也避免了刷新页面所带来的折磨. 下面

jQuery实现获取table表格第一列值的方法_jquery

本文实例讲述了jQuery实现获取table表格第一列值的方法.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: <!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.or

jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人.但是,无论如何,都掩饰不了那些包装下的死板. 那么如何让那些死板的数据 更具有可读性.可用性,能够让我们那些数据在"动"呢? 下面我们使用jquery+ajax 来为表格注入些活力.主要实现的目的就是:将表格的列标题转化为按钮,点击不同的列标题,便按相应的列对数据进行排序.比如学生信息表,我点击"生日"列,这张表便按生日排序将结果呈现在我们面前.使用ajax来调用本页也避免了刷新页面所带来的折磨. 下面

jQuery LigerUI 使用教程表格篇(1)_jquery

第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的"显示/隐藏" 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,单元格编辑.行编辑.明细编辑) 支持树表格 支持分组 代码 首先引入基本的css和js文件 复制代码 代码如下

jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容_jquery

onLoadSuccess : function(data) { if(!data.success){ //添加一个新数据行,第一列的值为你需要的提示信息,然后将其他列合并到第一列来,注意修改colspan参数为你columns配置的总列数 $(this).datagrid( 'appendRow', { portId : '<div style="text-align:center;color:red">'+data.msg+'</div>' }).datag

字段-获取表格中的动态隐藏域中的值

问题描述 获取表格中的动态隐藏域中的值 一个动态表格从数据库获取值,在一个列中有一个隐藏域有数据库的字段id,在js中获取这个这个字段的值,点击提交按钮获取当前列中隐藏域的值 出发日期 到达日期 反馈理由 提交 <script> function doSubmit(){ //获取隐藏域中的值 var id = $("#dateId").val(); alert(id); $.ajax({ url:"/order/"+id+"/update&qu