table表中行的显示与隐藏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>table行的显示与隐藏测试</title>

<script type="text/javascript" src="${pageContext.request.contextPath }/JS/jquery-1.8.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://miemiedev.github.com/mmGrid/src/mmGrid.css">
<script type="text/javascript" src="http://miemiedev.github.com/mmGrid/src/mmGrid.js"></script>
<link rel="stylesheet" type="text/css" href="http://miemiedev.github.com/mmGrid/src/mmPaginator.css">
<script type="text/javascript" src="http://miemiedev.github.com/mmGrid/src/mmPaginator.js"></script>

<script type="text/javascript">
    var cols = [
        {title:‘语文‘, name:‘chinese‘, width: 30, align: ‘center‘},
        {title:‘数学‘, name:‘math‘, width: 30, align: ‘center‘},
        {title:‘英语‘, name:‘english‘, width: 30, align: ‘center‘},
        {title:‘体育‘, name:‘sports‘, width: 30, align: ‘center‘},
        {title:‘音乐‘, name:‘music‘, width: 30, align: ‘center‘}
    ];
    var dataArray = [{chinese:"91",math:"91",english:"91",sports:"91",music:"91"},
                     {chinese:"92",math:"92",english:"92",sports:"92",music:"92"},
                     {chinese:"93",math:"93",english:"93",sports:"93",music:"93"},
                     {chinese:"94",math:"94",english:"94",sports:"94",music:"94"}];
    var myTable = $(‘#myTable‘).mmGrid({
        height: 460,
        cols: cols,
        items:dataArray,
        sortStatus: ‘asc‘,                 //升序
        multiSelect: true,                 //多选
        checkCol: true,                    //选框列
        fullWidthRows: true,               //伸展列宽自动充满表格
        nowrap :true,                      //内容不折行
        loadingText: ‘正在载入‘,
        noDataText: ‘暂无数据‘,
        plugins :[$(‘#myPage‘).mmPaginator({//分页插件
                style          : ‘plain‘,
                totalCountName : ‘totalCount‘,
                page           : 1,
                pageParamName  : ‘currentPage‘,
                limitParamName : ‘pageSize‘,
                limitLabel     : ‘每页{0}条‘,
                totalCountLabel: ‘共<span>{0}</span>条记录‘,
                limit          : null,
                limitList      : [10, 20, 30, 40]
        })]
    });

    $("#selectItem").change(function(){
        var selectIndex = $(this).val();
        var myRows = myTable.rows();
        myTable.load(dataArray);
        if(selectIndex>=1 && selectIndex<=4){
            for(var i=1;i<=myRows.length;i++){
                if(i != selectIndex){
                    $("#myTable tr:eq("+(i-1)+")").hide();
                }
            }
        }else if(selectIndex==5){
            for(var i=1;i<=myRows.length;i++){
                $("#myTable tr:odd").hide();
            }
        }else if(selectIndex==6){
            for(var i=1;i<=myRows.length;i++){
                $("#myTable tr:even").hide();
            }
        }
    });
});
</script>
</head>
<body>
    <span>选择要显示的行:</span>
    <select id="selectItem">
        <option value="0">所有行</option>
        <option id="item1" value="1"/>第一行</option>
        <option id="item2" value="2"/>第二行</option>
        <option id="item3" value="3"/>第三行</option>
        <option id="item4" value="4"/>第四行</option>
        <option id="oddItem" value="5"/>奇数行</option>
        <option id="evenItem" value="6"/>偶数行</option>
    </select>
    <body>
        <table id="myTable"></table>
           <div id="myPage" style="text-align: right;"></div>
    </body>
</body>
</html>
时间: 2024-10-31 04:23:02

table表中行的显示与隐藏的相关文章

PowerDesigner 15的Table表视图的列显示Code

PowerDesigner 15的图表的Table表视图一般显示成这样: 现在,我要将Code显示到Table表视图上,该怎么做?选择菜单:Tools→Display Preferences,弹出对话框选择Table,点击Advanced按钮,弹出对话框选择Columns,点击Select按钮,弹出对话框后选中Code并将其移动到最上面. 现在看看Table表视图的效果:

对table最后一行显示与隐藏

//显示table最后一行,如果用block的话,可能会影响到页面的样式 $("#table tr").get($("#table tr").length - 1).style.display= '' ; //隐藏table最后一行 $("#table tr").get($("#table tr").length - 1).style.display = 'none'; 原文地址:https://www.cnblogs.com

控制页面元素的显示和隐藏

CreateTime--2017年7月13日07:30:55Author:Marydon js控制页面元素的显示和隐藏&<c:if></c:if>标签控制页面元素的显示和隐藏 说明:本文的重点在使用后者实现 实例: 医嘱类型分为:长嘱,临嘱,中医三种,页面默认只显示长嘱信息,点击临嘱或中医显示对应信息:选中变色. CSS部分: /* 医嘱:长嘱,临嘱,中医样式显示 Start*/ .yz_td1 { line-height: 28px; height: 28px; padd

控制div层的显示以及隐藏

控制div层的显示以及隐藏,例如,点击登录,弹出登录的层. 1.添加script代码 <script> function add_address(){ $('#popup2').show(); $('#gray').show(); } function closeAddressDiv(){ $('#popup2').hide(); } </script> 2.在body标签里面添加如下的div <div class="popup2" id="po

《ArcGIS Engine+C#实例开发教程》第八讲 属性数据表的查询显示

原文:<ArcGIS Engine+C#实例开发教程>第八讲 属性数据表的查询显示 第一讲 桌面GIS应用程序框架的建立 第二讲 菜单的添加及其实现 第三讲 MapControl与PageLayoutControl同步 第四讲 状态栏信息的添加与实现 第五讲 鹰眼的实现 第六讲 右键菜单添加与实现 教程Bug及优化方案1 第七讲 图层符号选择器的实现1 第七讲 图层符号选择器的实现2 第八讲 属性数据表的查询显示 摘要:这一讲中,我们将实现图层属性数据表的查询显示.在ArcMap中,单击图层右

jQuery 显示和隐藏以及淡出淡入效果

jQuery实现动画效果? 1) 显示和隐藏 show():显示 hide():隐藏 togger():显示和隐藏的组合1234<script type="text/javascript"> $(function(){ $("tr:even").css("background-color","gray").eq(1).css("background-color","red")

DataGridView右键菜单自定义显示及隐藏列

WinForm程序中表单的列可自定义显示及隐藏,是一种常见的功能,对于用户体验来说是非常好的.笔者经过一段时间的摸索,终于实现了自己想要的功能及效果,现记录一下过程: 1.新建一个自定义控件,命名为:PopupMenuControl. 2.在PopupMenuControl.Designet文件中的InitializeComponent()方法下面,注册以下事件: this.Paint += new System.Windows.Forms.PaintEventHandler(this.Popu

jsp页面做文件上传时遇到要根据登陆名按钮显示或隐藏的情况

项目遇到的情况要根据登陆的角色不同显示或隐藏按钮,因为之前没有遇到过 所以有些不知道怎么下手,百度解决了 方法如下: document.getElementById("#anniu").hide() <button id="anniu">隐藏按钮</button>

javascript页面详细信息的显示和隐藏

页面详细信息的显示和隐藏 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> function show_detail(detail){ var p=document.getElementById('p'); if(detail.open){ p.style.