table表中行的显示与隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于table表中行的显示与隐藏的主要内容，如果未能解决你的问题，请参考以下文章
Sphinx、reStructuredText 显示/隐藏代码片段