html table在线设计,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*/

//

//

//

function senfe(o, a, b, c, d) {

var t = document.getElementById(o).getElementsByTagName("tr");

for (var i = 0; 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代码

//核心代码

pageEncoding="UTF-8"%>

index

• Usage

Accounts

• Users
• Groups
• Global permissions
• Authentication
• Avatars
• User directories

Settings

• Server settings
• Database
• Application links
• Mail server
• Licensing

Support

• Atlassian Support

  Tools

• Logging and Profiling

DataGrid 

add edit delete

search

	id	uploader	name	description	project	version	category	tags	downloads

${jarFile.id }

${jarFile.uploader }

${jarFile.name }

${jarFile.description }

${jarFile.project }

${jarFile.version }

${jarFile.category }

${jarFile.tags }

${jarFile.downloads }