首页 > 代码库 > html中表格设计
html中表格设计
点击链接加入群【JavaEE(SSH+IntelliJIDE+Maven)】:http://jq.qq.com/?_wv=1027&k=L2rbHv
老大不许让我用其他样式,非要用aui的,既然做出来,又不想浪费自己的成功,就这样贡献出来给大家学习
1先上图片
2.css样式
/* admin/index.html 样式*/ .dateGrid_operate { border-bottom: 1px solid #ddd; padding: 0px; } #dateGrid_main, #dateGrid { border-top: #ddd solid 1px; border-left: #ddd solid 1px; width: 100%; table-layout: fixed; } #dateGrid_main th { background-color: gray; border-bottom: #ddd solid 1px; border-right: #ddd solid 1px; overflow: hidden; white-space: nowrap; } #dateGrid td { overflow: hidden; white-space: nowrap; border-bottom: #ddd solid 1px; border-right: #ddd solid 1px; } .dateGrid_div { text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } /*容纳表格内容的DIV,这个DIV上放置滚动条*/ .content { height: 300px; /*定一下高度,要不然就撑出来没滚动条了*/ overflow: scroll; /*总是显示滚动条*/ }
3.javascript脚本
// admin/index.jsp //DataGrid 数据表格 /*dateGrid指代table*/ //<script language="javascript"> //<!-- // //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); // senfe("dateGrid","#fff","#fff","#cfc","#fff"); //--> //</script> function senfe(o, a, b, c, d) { var t = document.getElementById(o).getElementsByTagName("tr"); for (var i = 0; i < t.length; i++) { t[i].style.backgroundColor = (t[i].sectionRowIndex % 2 == 0) ? a : b; t[i].onclick = function() { if (this.x != "1") { this.x = "1";// 本来打算直接用背景色判断,FF获取到的背景是RGB值,不好判断 this.style.backgroundColor = d; } else { this.x = "0"; this.style.backgroundColor = (this.sectionRowIndex % 2 == 0) ? a : b; } } t[i].onmouseover = function() { if (this.x != "1") this.style.backgroundColor = c; } t[i].onmouseout = function() { if (this.x != "1") this.style.backgroundColor = (this.sectionRowIndex % 2 == 0) ? a : b; } } }
4html代码
//核心代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <jsp:include page="/WEB-INF/view/header.jsp"> <jsp:param name="navigation" value="home" /> </jsp:include> <section id="content" role="main" style="background: #f5f5f5;"> <header class="aui-page-header"> <div class="aui-page-header"> <div class="aui-page-header-inner"> <h1>index</h1> </div> </div> </header> <div class="aui-page-panel"> <div class="aui-page-panel-inner"> <div class="aui-page-panel-nav"> <!-- Vertical Nav is usually placed inside .aui-page-panel-nav. Refer to content layout documentation for details. --> <nav class="aui-navgroup aui-navgroup-vertical"> <div class="aui-navgroup-inner"> <ul class="aui-nav"> <li class="aui-nav-selected"><a href="http://example.com/">Usage</a></li> </ul> <div class="aui-nav-heading"> <strong>Accounts</strong> </div> <ul class="aui-nav"> <li><a href="http://example.com/">Users</a></li> <li><a href="http://example.com/">Groups</a></li> <li><a href="http://example.com/">Global permissions</a></li> <li><a href="http://example.com/">Authentication</a></li> <li><a href="http://example.com/">Avatars</a></li> <li><a href="http://example.com/">User directories</a></li> </ul> <div class="aui-nav-heading"> <strong>Settings</strong> </div> <ul class="aui-nav"> <li><a href="http://example.com/">Server settings</a></li> <li><a href="http://example.com/">Database</a></li> <li><a href="http://example.com/">Application links</a></li> <li><a href="http://example.com/">Mail server</a></li> <li><a href="http://example.com/">Licensing</a></li> </ul> <div class="aui-nav-heading"> <strong>Support</strong> </div> <ul class="aui-nav"> <li><a href="http://example.com/">Atlassian Support Tools</a></li> <li><a href="http://example.com/">Logging and Profiling</a></li> </ul> </div> </nav> <!-- Vertical Nav is usually placed inside aui-page-panel-nav --> </div> <section class="aui-page-panel-content"> <h1>DataGrid </h1> <div style="width: 80%;" class="embedded-panel"> <div class="dateGrid_operate"> <table style="width: 100%;" id="dateGrid_operate" > <tbody> <tr> <td style="width: 100%;"> <a class="aui-button" href="javascript:void(0)"> <span class="aui-icon aui-icon-small aui-iconfont-add"></span>add </a> <a class="aui-button" href="javascript:void(0)"> <span class="aui-icon aui-icon-small aui-iconfont-add"></span>edit </a> <a class="aui-button" href="javascript:void(0)"> <span class="aui-icon aui-icon-small aui-iconfont-close-dialog"></span>delete </a> </td> <td style="white-space: nowrap;"> <input type="text" class="text" placeholder="please input name" id="fname" name="fname"> <a class="aui-button" href="javascript:void(0)"> <span class="aui-icon aui-icon-small aui-iconfont-search"></span>search </a> </td> </tr> </tbody> </table><!--#dateGrid_operate --> </div><!--.dateGrid_operate --> <div class="dateGrid_main"> <div class="title"> <table class="aui " id="dateGrid_main"> <tr> <th><input type="checkbox" id="checkbox_all"></th> <th>id</th> <th>uploader</th> <th>name</th> <th>description</th> <th>project</th> <th>version</th> <th>category</th> <th>tags</th> <th>downloads</th> </tr> </table> </div><!--.title --> <div class="content"> <div> <table class="aui" id="dateGrid"> <c:forEach items="${jarFiles.content }" var="jarFile"> <tr> <td id="checkbox"><input type="checkbox" id="checkbox_${jarFile.id}"></td> <td id="id"><div class="dateGrid_div">${jarFile.id }</div></td> <td id="uploader"><div class="dateGrid_div">${jarFile.uploader }</div></td> <td id="name"><div class="dateGrid_div">${jarFile.name }</div></td> <td id="description"><div class="dateGrid_div">${jarFile.description }</div></td> <td id="project"><div class="dateGrid_div">${jarFile.project }</div></td> <td id="version"><div class="dateGrid_div">${jarFile.version }</div></td> <td id="category"><div class="dateGrid_div">${jarFile.category }</div></td> <td id="tags"><div class="dateGrid_div">${jarFile.tags }</div></td> <td id="downloads"><div class="dateGrid_div">${jarFile.downloads }</div></td> </tr> </c:forEach> </table> <script language="javascript"> <!-- //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); senfe("dateGrid","#fff","#fff","#cfc","#fff"); --> </script> </div> </div><!--.content --> </div><!--.dateGrid_main --> </div><!--.embedded-panel --> </section> </div> <!--.aui-page-panel-inner --> </div> <!--.aui-page-panel --> </section> <jsp:include page="/WEB-INF/view/footer.jsp" />
html中表格设计
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。