首页 > 代码库 > 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中表格设计