precipitant

css+html横纵表头锁定的表格程序的说明

完全依靠css+html实现的可以锁定横纵表头的表格。并且横纵表头都已分栏显示。只不过横纵表头分别z在左侧和上部。还不能实现右侧和下部的表尾的锁定。所以还无法添加锁定统计列。但是他的简单已经优于其它解决方案了。只不过利用css的expression 表达式会降低性能，增大浏览器的开销。

先看一下实例样子吧

http://blog.csdn.net/precipitant/archive/2006/11/25/1413662.aspx

首先必须说明的是：此程序是效仿鸟食轩的主人 birdshome（mvp）的绝对的单表格支持横纵表头锁定示例

我只不过是仔细阅读了该程序，并作了仔细的测试，然后添加了表头的分栏，然后将代码整理出来了。开始想在

表尾添加一些锁定的统计行和统计列，但是没能成功。由于现在忙于一个项目，所以暂时放弃。不过我想利用这种技术应该可以搞定。

本技术的的实现原理也是非常简单的。并且birdshome 对此做了详尽的分析，原文：http://www.cnblogs.com/birdshome/archive/2006/05/13/ScrollTableDetails.html

本文的实现完全是利用 css 来控制。而 OVERFLOW，expressionPOSITION: relative 是实现的核心。为了方便有心人拷贝代码进行测试和研究。我把原代码也放到下面。

< html >

< head >

< title > 绝对的单表格支持横纵表头锁定示例 </ title >

< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" >

< meta content ="JavaScript, JScript, DHTML,Table" name ="keywords" >

< style >

.div1{BORDER-RIGHT: #808080 2px solid; BORDER-TOP: #808080 2px solid; DISPLAY: inline; OVERFLOW: auto; BORDER-LEFT: #808080 2px solid; WIDTH: 640px; CURSOR: default; BORDER-BOTTOM: #808080 2px solid; HEIGHT: 400px}

.tr1{FONT-WEIGHT: bold; Z-INDEX: 5; POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop)}

.tr2{FONT-WEIGHT: bold; Z-INDEX: 100; POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop + 300)}

.th0{BORDER-RIGHT: #808080 2px solid; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 10; ; LEFT: expression(this.parentElement.offsetParent.scrollLeft); WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ffdddd}

.th1{BORDER-LEFT: #000000 0px solid; COLOR: #800000; BORDER-BOTTOM: #000000 1px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ecffec}

.th2{BORDER-LEFT: #000000 1px solid; COLOR: #800000; BORDER-BOTTOM: #000000 1px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ecffec}

.th3{BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: #800000; BORDER-BOTTOM: #000000 1px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ecffec}

.th4{BORDER-RIGHT: #808080 2px solid; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 10; ; LEFT: expression(this.parentElement.offsetParent.scrollLeft); BORDER-BOTTOM: #808080 2px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ffdddd}

.th6{BORDER-LEFT: #000000 0px solid; COLOR: #800000; BORDER-BOTTOM: #808080 2px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ecffec}

.th7{BORDER-LEFT: #000000 1px solid; COLOR: #800000; BORDER-BOTTOM: #808080 2px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ecffec}

.tha{BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: #800000; BORDER-BOTTOM: #808080 2px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #ecffec}

.td5{BORDER-RIGHT: #808080 2px solid; BORDER-TOP: black 0px solid; FONT-WEIGHT: bold; ; LEFT: expression(this.parentElement.offsetParent.parentElement.scrollLeft); BORDER-LEFT: black 0px solid; COLOR: #004080; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #efe1ff}

.td6{BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; BORDER-BOTTOM: #000 1px solid; WHITE-SPACE: nowrap}

.td7{BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid; WHITE-SPACE: nowrap}

.td0{BORDER-RIGHT: #808080 2px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; ; LEFT: expression(this.parentElement.offsetParent.parentElement.scrollLeft); BORDER-LEFT: black 0px solid; COLOR: #004080; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #efe1ff}

.td9{BORDER-RIGHT: #808080 2px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; ; LEFT: expression(this.parentElement.offsetParent.parentElement.scrollLeft); BORDER-LEFT: black 0px solid; COLOR: #004080; BORDER-BOTTOM: black 1px solid; WHITE-SPACE: nowrap; POSITION: relative; BACKGROUND-COLOR: #efe1ff}

.td1{BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 0px solid; BORDER-BOTTOM: #000 1px solid; WHITE-SPACE: nowrap}

.td2{BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid; WHITE-SPACE: nowrap}

</ style >

</ head >

< body >

< h2 > 绝对的单表格支持横纵表头锁定示例 </ h2 >

< DIV class ="div1" onselectstart ="return false" >

< TABLE id ="Table4" style ="DISPLAY: inline; BORDER-COLLAPSE: collapse" cellSpacing ="0" cellPadding ="2"

border ="0" >

< TBODY >

< TR class ="tr1" >

< TD class ="th0" >   </ TD >

< TD class ="th1" colSpan ="5" > 东北地区 </ TD >

< TD class ="th2" colSpan ="4" > 华北地区 </ TD >

< TD class ="th2" colSpan ="3" > 西南地区 </ TD >

< TD class ="th2" colSpan ="3" > 西北地区 </ TD >

< TD class ="th2" colSpan ="5" > 华东地区 </ TD >

< TD class ="th2" colSpan ="3" > 华南地区 </ TD >

< TD class ="th3" colSpan ="3" > 华中地区 </ TD >

</ TR >

< TR class ="tr1" >

< TD class ="th4" >   </ TD >

< TD class ="th6" > 大连 </ TD >

< TD class ="th7" > 长春 </ TD >

< TD class ="th7" > 沈阳 </ TD >

< TD class ="th7" > 哈尔滨 </ TD >

< TD class ="th7" > 白城 </ TD >

< TD class ="th7" > 北京 </ TD >

< TD class ="th7" > 天津 </ TD >

< TD class ="th7" > 石家庄 </ TD >

< TD class ="th7" > 唐山 </ TD >

< TD class ="th7" > 成都 </ TD >

< TD class ="th7" > 重庆 </ TD >

< TD class ="th7" > 昆明 </ TD >

< TD class ="th7" > 西安 </ TD >

< TD class ="th7" > 乌鲁木齐 </ TD >

< TD class ="th7" > 兰州 </ TD >

< TD class ="th7" > 上海 </ TD >

< TD class ="th7" > 南京 </ TD >

< TD class ="th7" > 杭州 </ TD >

< TD class ="th7" > 苏州 </ TD >

< TD class ="th7" > 无锡 </ TD >

< TD class ="th7" > 广州 </ TD >

< TD class ="th7" > 深圳 </ TD >

< TD class ="th7" > 珠海 </ TD >

< TD class ="th7" > 武汉 </ TD >

< TD class ="th7" > 襄樊 </ TD >

< TD class ="tha" > 十堰 </ TD >

</ TR >

< TR >

< TD class ="td5" rowSpan ="10" > 家畜 </ TD >

< TD class ="td5" > 猪 </ TD >

< TD class ="td6" > 5 </ TD >

< TD class ="td7" > 5 </ TD >

< TD class ="td7" > 23 </ TD >

< TD class ="td7" > 55 </ TD >

< TD class ="td7" > 1 </ TD >

< TD class ="td7" > 5 </ TD >

< TD class ="td7" > 4 </ TD >

< TD class ="td7" > 5 </ TD >

< TD class ="td7" > 6 </ TD >

< TD class ="td7" > 1 </ TD >

< TD class ="td7" > 87 </ TD >

< TD class ="td7" > 22 </ TD >

< TD class ="td7" > 2 </ TD >

< TD class ="td7" > 5 </ TD >

< TD class ="td7" > 23 </ TD >

< TD class ="td7" > 55 </ TD >

< TD class ="td7" > 1 </ TD >

< TD class ="td7" > 5 </ TD >

< TD class ="td7" > 4 </ TD >

< TD class ="td7" > 5 </ TD >

< TD class ="td7" > 6 </ TD >

< TD class ="td7" > 1 </ TD >

< TD class ="td7" > 87 </ TD >

< TD class ="td7" > 22 </ TD >

< TD class ="td7" > 2 </ TD >

< TD class ="td7" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" >< FONT face ="宋体" > 狗 </ FONT ></ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 猫 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 马 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 牛 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 羊 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 驴 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 骆驼 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 大象 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 骡子 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" rowSpan ="11" > 家禽 </ TD >

< TD class ="td0" > 鸡 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 鸭 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 鹅 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 白鸡 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 乌鸡 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 火鸡 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 天鹅 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 麻鸭 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 康贝尔鸭 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td0" > 呆头鹅 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

< TR >

< TD class ="td9" > 落汤鸡 </ TD >

< TD class ="td1" > 5 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 23 </ TD >

< TD class ="td2" > 55 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 4 </ TD >

< TD class ="td2" > 5 </ TD >

< TD class ="td2" > 6 </ TD >

< TD class ="td2" > 1 </ TD >

< TD class ="td2" > 87 </ TD >

< TD class ="td2" > 22 </ TD >

< TD class ="td2" > 2 </ TD >

< TD class ="td2" > 4 </ TD >

</ TR >

</ TBODY ></ TABLE >

</ DIV >

</ body >

</ html >

你可能感兴趣的:(JavaScript,html,css,table,Class,div)

React篇之three渲染这个一个非常哈 react.js 前端前端框架
需求：拖拽右侧面板，里面的three模型能够自适应import{useEffect,useState,useRef}from'react'import'./App.css'import*asTHREEfrom'three';import{GLTFLoader}from'three/addons/loaders/GLTFLoader.js';import{debounce}from'lodash';
对vue VS react的理解向贤前端开发 vue.js react.js 前端
对vueVSreact的理解Vue与React的核心区别在于设计哲学：Vue追求渐进式开发和开箱即用，通过模板语法、响应式系统和官方生态提供低门槛的集成方案。React强调函数式编程和纯JavaScript驱动，以JSX、单向数据流和灵活的生态构建高自由度的视图层。核心差异可总结为：响应式机制、模板vsJSX、API设计、生态策略、性能优化模式。分点论述：1.响应式机制Vue：基于数据劫持（Vue
《react》前端面试题微光面试题 react.js 前端 javascript
说说你对reacthook的理解ReactHooks是React16.8版本引入的一种新的特性，它允许在不编写class的情况下使用state和其他React特性。我的理解主要集中在以下几个方面：函数组件的状态管理：Hooks提供了useState这样的钩子函数，使得我们可以在函数组件中使用状态（state），而不需要将组件转换为class组件。这简化了代码，并使组件的逻辑更易于理解和维护。副作用
大文件上传前端javascript
大文件上传通常需要分片处理、断点续传等技术来提高上传效率和可靠性。以下是一个简单的JavaScript示例，展示如何实现大文件的分片上传和断点续传：大文件上传上传//请求基准地址axios.defaults.baseURL='http://localhost:3000';//选中的文件varfile=null;//选择文件document.getElementById('fileInput').o
HTML标记语言＜head＞中的几个元素 2301_79698214 html 前端
在HTML文档中，部分包含了文档的元数据（metadata），这对于网页的正确显示和搜索引擎优化（SEO）非常重要。部分通常包含以下几个重要的元素：：定义了网页的标题，这个标题会显示在浏览器的标题栏或页面的标签上。例如：我的网页：用于定义网页的元数据，如字符集、页面描述、关键词、作者、视口设置等。例如：：用于链接外部资源，如CSS文件、图标（favicon）等。例如：：用于直接在文档中嵌入CSS样
Unity 扩展方法程序员也有头发 Unity开发 unity 游戏引擎游戏程序
比如我们要给transform做还原方法publicstaticclassExtensionMethod{publicstaticvoidResetTransformation(thisTransformtrans){trans.position=Vector3.zero;trans.localRotation=Quaternion.identity;trans.localScale=Vector
什么？一维数组也要自定义排序？林tong学 java 开发语言
自定义排序在编写Java代码时，常常会用到自定义排序。例如，有一些学生，学生有分数score、num两个属性。我们需要根据学生的分数作降序排序（即分数高的在前面）。如果分数相同，需要按照年龄作升序（即年龄高的在后面）。classStudent{intscore;intage;Student(intscore,intage){this.score=score;this.age=age;}public
spring event发布及监听实例 weixin_33924220 java 测试
序本文主要介绍下如何在spring中进行发布时间以及接收事件定义事件publicclassDemoEventextendsApplicationEvent{privateStringmessage;publicDemoEvent(Objectsource,Stringmessage){super(source);this.message=message;}publicStringgetMessag
.net 插件式开发——实现web框架中大数据算法嵌入(BP算法逼近) weixin_34219944 json 人工智能
关于算法的引入：插件式架构设计，可移植性强，利于算法的升级。【插件式开发相关资料】https://www.cnblogs.com/lenic/p/4129096.html以BP算法为例：1、首先定义一个接口规范////////插件的统一入口///publicinterfaceIPluginPerfrom{//////统一算法插件入口//////输出参数的个数///输出参数///输入参数///str
16天 - 单例模式有哪几种实现？如何保证线程安全？什么是策略模式？一般用在什么场景？什么是模板方法模式？一般用在什么场景？和道一文字yyds 单例模式安全策略模式
单例模式有哪几种实现？如何保证线程安全？单例模式是一种确保某个类在程序中只有一个实例，并提供全局访问点的设计模式。以下是几种常见的单例模式实现方式及其线程安全保证方法：饿汉式饿汉式单例在类加载时就创建好实例对象，因此在程序调用时直接返回该单例对象即可。由于类加载的过程是线程安全的，所以饿汉式单例不存在线程安全问题。publicclassEagerSingleton{privatestaticfin
HTML5拼图游戏开发经验分享木木黄木木 html5 前端 html
HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
图像工具插件：Editor.js 的图像处理解决方案贡沫苏Truman
图像工具插件：Editor.js的图像处理解决方案imageImageBlockforEditor.js项目地址:https://gitcode.com/gh_mirrors/image8/imageEditor.js的图像工具插件是一个强大的开源项目，致力于为Editor.js富文本编辑器提供图像处理功能。该项目主要使用JavaScript编程语言，并且是基于Editor.js的插件架构进行开发
Flask--orm wakawakaohoh Flask
fromflaskimportFlask#1.导入模块fromflask_sqlalchemyimportSQLAlchemyapp=Flask(__name__)importos#获取绝对路径BASE_DIR=os.path.abspath(os.path.dirname(__file__))print(BASE_DIR)##2.配置数据库连接classConfig(object):#连接数据库
python flask sqlalchemy JSON 数据查询 Purple_Grape207 python flask python
classUser(db.Model):id=db.Column(db.Integer,primary_key=True)username=db.Column(db.String(80),unique=True,nullable=False)email=db.Column(db.String(120),unique=True,nullable=False)userInfos=db.Column(d
Python通过TCP端口和HTTP端口连接clickhouse的几种方法与报错解决有好的生发方法记得推荐给我 clickhouse
一、使用request库使用HTTP协议端口，默认为8123这种方法只能获取指定格式的数据importrequestsSSL_VERIFY=Falsehost='http://127.0.0.1:8123'//ip地址及HTTP协议端口query='select*fromdatabase.table_nameslimit5'//SQL语句user=('username','password')//
Node.js Web 模块详解 froginwe11 开发语言
Node.jsWeb模块详解引言Node.js作为一款流行的JavaScript运行环境，以其高性能、事件驱动和非阻塞I/O模型而闻名。在Node.js中，模块是构建应用程序的基础，也是其强大的关键所在。本文将详细介绍Node.js的Web模块，包括其基本概念、常用模块及其应用。模块的概念在Node.js中，模块是一种组织代码的方式，它将代码分割成独立的、可复用的部分。模块不仅可以减少代码的冗余，
python连接clickhouse两种方法 dair6 sql相关问题 python 数据库 sql
1.使用Client类importloggingfromapscheduler.schedulers.blockingimportBlockingSchedulerfromclickhouse_driverimportClientlogger=logging.getLogger(__name__)#操作日志对象classCkClient():"""数据库连接的公共类，初始化连接，自定义查询，删除等
【H2O2 | 软件开发】事件循环机制过期的H2O2 【H2O2】全栈面试题前端 javascript
目录前言开篇语准备工作正文概念流程事件队列类型示例结束语前言开篇语本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。准备工作概念篇，不对开发环境作要求。正文概念事件循环（EventLoop）是处理异步事件的一种机制，特别是在单线程环境中（如JavaScript在浏览器或Node.js中的运行）。它允许程序在
国产编辑器EverEdit - 脚本(解锁文本编辑的无限可能) 编辑器爱好者妙用编辑器 #《EverEdit使用手册》编辑器 EverEdit EmEditor Notepad
1脚本1.1应用场景脚本是一种功能扩展代码，用于提供一些编辑器通用功能提供不了的功能，帮助用户在特定工作场景下提高工作效率，几乎所有主流的编辑器、IDE都支持脚本。 EverEdit的脚本支持js(语法与javascript类似)、VBScript两种编程语言(注：也可以支持其他语言，但较复杂)，EverEdit本身提供了大量对编辑器自身操作的API，通过脚本语言和API，用户可以极大的扩展
TeXstudio 编写基本的 Latex （备忘）波格斯特 Latex
目录0.TeXstudio设置1.基本页面简单的一个例子来点章节再加个简单封皮加个目录小细节0.TeXstudio设置保证为UTF-8在选项卡选项中设置编译器为XeLaTeX1.基本页面简单的一个例子\documentclass{ctexart}%使用中文版的article文档类型排版\begin{document}hello,world你好，世界\end{document}来点章节\docume
Sass (Scss) 与 Less 的区别与选择王强你强 sass scss less
在前端开发中，CSS预处理器如Sass（SyntacticallyAwesomeStylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器，各自具有独特的优点和特性。本文将详细探讨Sass（特别是其语法扩展Scss）与Less之间的区别，并提供选择建议。1.语法差异Sass最初是使用缩进
vue2安装scss 活宝小娜 vue scss 前端 css
vue2安装scss1、下载npminstall-Dsasssass-loader2、新建src/styles/variables.scss文件，并在里面写一些常用的公共样式，在vue.config.js中添加css部分const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDepen
QT CSS 选择器 m0_55576290 qt qt css 开发语言
在Qt的样式表（StyleSheet）中，选择器（Selector）是用来指定样式应用对象的一种语法。它类似于CSS中的选择器，用于明确指定哪些控件（或控件的子元素）应该应用特定的样式。通过使用选择器，你可以更精确地控制样式的作用范围，避免样式被意外继承或应用到错误的控件上。1.选择器的类型在Qt的样式表中，有几种常用的选择器：（1）类型选择器（TypeSelector）类型选择器基于控件的类名来
CSS中相对定位使用详情 ~废弃回忆 �༄ HTML css 前端 CSS中相对定位使用详情
1.如何设置相对定位?给元素设置postition:relative即可实现相对定位.可以使用left,right,top,bottom四个属性调整位置.2.相对定位的参考点在哪里?相对于自己原来的位置3.相对定位的特点:1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响.2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的.默认规则是:定位的元素
spring 的model repository service controller的功能 LCY133 web开发 spring java 后端
1.Controller层（控制层）•功能：负责接收和处理HTTP请求，协调客户端与业务逻辑之间的交互。•核心职责：•请求处理：解析HTTP请求参数（如URL参数、Body数据、Headers）。•路由分发：根据请求路径（@RequestMapping）调用对应的Service方法。•响应生成：返回格式化数据（如JSON、XML）或视图（如HTML页面）。•输入校验：验证请求参数的合法性（如使用@
React Native 性能调试指南一个前端人 react-native react native react.js javascript
写在前面在开发ReactNative应用时，性能优化是一个至关重要的环节。良好的性能不仅可以提升用户体验，还能减少应用的资源消耗，提高应用的稳定性。本文将详细介绍如何对ReactNative应用进行性能调试和优化，包括性能综述、编译速度优化、列表配置优化、JavaScript加载优化以及Profiling。一、性能综述在开始性能调试之前，了解一些基本概念和工具是非常重要的。以下是一些关键点：FPS
RY9121 17V 2A 500KHz ECOT PWM Sync Step-Down Regulator BTSS2013 同步降压调节器
1、FeaturesWide4.5Vto17VOperatingInputRange110mΩ/70mΩLowRDs(oN)InternalPower2AContinuousOutputCurrentMOSFETS500KHzSwitchingFrequencyOutputAdjustablefrom0.6VECOTModeControlwithFastTransientNoSchottkyDio
CSS中绝对定位 ~废弃回忆 �༄ HTML css 前端 CSS中绝对定位
1.如何设置绝对定位?给元素设置postition:absolute即可实现绝对定位可以使用left,right,top,bottom四个属性调整位置2.绝对定位的参考点在哪里?参考他的包含块.什么是包含块?1.对于没有脱离文档流的元素:包含块就是父元素;2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没有定位,那包含块就是整个页面)3.绝对定位元素的特点:1.脱离文
用css写背景模糊的三种情况小竹子14 css 前端
1.背景模糊这种最简单也是最直接的，这里展示两种背景模糊的写法：1.用backdrop-filter的一个子属性blur进行设置模糊（这里的值代表的是将n✖n方格里面的像素的颜色做加权平均，即高斯模糊。2.用filter直接进行设置模糊。这里需要注意的是，filter会直接影响元素的内容，而backdrop-filter作用于元素的背景。通常情况下，使用backdrop-filter会使整个元素的
LLM：RMSNorm 微风❤水墨 LLM &AIGC &VLP LLM RMSNorm
importtorchimporttorch.nnasnnclassLayerNorm(nn.Module):def__init__(self,dim:int,eps:float):super(LayerNorm,self).__init__()self.dim=dimself.eps=epsself.weight=nn.Parameter(torch.ones(self.dim))self.bi
Java实现的简单双向Map，支持重复Value superlxw1234 java 双向map
关键字：Java双向Map、DualHashBidiMap 有个需求，需要根据即时修改Map结构中的Value值，比如，将Map中所有value=V1的记录改成value=V2，key保持不变。数据量比较大，遍历Map性能太差，这就需要根据Value先找到Key，然后去修改。即：既要根据Key找Value，又要根据Value
PL/SQL触发器基础及例子百合不是茶 oracle数据库触发器 PL/SQL编程
触发器的简介; 触发器的定义就是说某个条件成立的时候，触发器里面所定义的语句就会被自动的执行。因此触发器不需要人为的去调用，也不能调用。触发器和过程函数类似过程函数必须要调用, 一个表中最多只能有12个触发器类型的,触发器和过程函数相似触发器不需要调用直接执行, 触发时间：指明触发器何时执行，该值可取： before：表示在数据库动作之前触发
[时空与探索]穿越时空的一些问题 comsci 问题
我们还没有进行过任何数学形式上的证明,仅仅是一个猜想..... 这个猜想就是; 任何有质量的物体(哪怕只有一微克)都不可能穿越时空,该物体强行穿越时空的时候,物体的质量会与时空粒子产生反应,物体会变成暗物质,也就是说,任何物体穿越时空会变成暗物质..(暗物质就我的理
easy ui datagrid上移下移一行商人shang js 上移下移 easyui datagrid
/** * 向上移动一行 * * @param dg * @param row */ function moveupRow(dg, row) { var datagrid = $(dg); var index = datagrid.datagrid("getRowIndex", row); if (isFirstRow(dg, row)) {
Java反射 oloz 反射
本人菜鸟，今天恰好有时间，写写博客，总结复习一下java反射方面的知识，欢迎大家探讨交流学习指教首先看看java中的Class package demo; public class ClassTest { /*先了解java中的Class*/ public static void main(String[] args) { //任何一个类都
springMVC 使用JSR-303 Validation验证杨白白 spring mvc
JSR-303是一个数据验证的规范，但是spring并没有对其进行实现，Hibernate Validator是实现了这一规范的，通过此这个实现来讲SpringMVC对JSR-303的支持。 JSR-303的校验是基于注解的，首先要把这些注解标记在需要验证的实体类的属性上或是其对应的get方法上。登录需要验证类 public class Login { @NotEmpty
log4j 香水浓 log4j
log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, HTML, DATABASE #log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, ROLLINGFILE, HTML #console log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender log4
使用ajax和history.pushState无刷新改变页面URL agevs jquery 框架 Ajax html5 chrome
表现如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过
centos中文乱码 AILIKES centos OS ssh
一、CentOS系统访问 g.cn ，发现中文乱码。于是用以前的方式：yum -y install fonts-chinese CentOS系统安装后，还是不能显示中文字体。我使用 gedit 编辑源码，其中文注释也为乱码。后来，终于找到以下方法可以解决，需要两个中文支持的包： fonts-chinese-3.02-12.
触发器 baalwolf 触发器
触发器(trigger)：监视某种情况，并触发某种操作。触发器创建语法四要素：1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/delete) 语法： create trigger triggerName after/before
JS正则表达式的i m g bijian1013 JavaScript 正则表达式
g:表示全局（global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止。 i:表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。 m:表示
HTML5模式和Hashbang模式 bijian1013 JavaScript AngularJS Hashbang模式 HTML5模式
我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。 html5Mode 一个布尔值，标识$location服务是否运行在HTML5模式下。 ha
[Maven学习笔记六]Maven生命周期 bit1129 maven
从mvn test的输出开始说起当我们在user-core中执行mvn test时，执行的输出如下： /software/devsoftware/jdk1.7.0_55/bin/java -Dmaven.home=/software/devsoftware/apache-maven-3.2.1 -Dclassworlds.conf=/software/devs
【Hadoop七】基于Yarn的Hadoop Map Reduce容错 bit1129 hadoop
运行于Yarn的Map Reduce作业，可能发生失败的点包括 Task Failure Application Master Failure Node Manager Failure Resource Manager Failure 1. Task Failure 任务执行过程中产生的异常和JVM的意外终止会汇报给Application Master。僵死的任务也会被A
记一次数据推送的异常解决端口解决 ronin47 记一次数据推送的异常解决
　　需求：从db获取数据然后推送到B 程序开发完成，上jboss,刚开始报了很多错，逐一解决，可最后显示连接不到数据库。机房的同事说可以ping 通。　　自已画了个图，逐一排除，把linux 防火墙　和　setenforce　设置最低。　　　service iptables stop
巧用视错觉-UI更有趣 brotherlamp UI ui视频 ui教程 ui自学 ui资料
我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。在下面这篇文章中，我们首先会简单介绍一下格式塔原理中的基本概念，
线段树-poj1177-N个矩形求边长（离散化+扫描线） bylijinnan 数据结构算法线段树
package com.ljn.base; import java.util.Arrays; import java.util.Comparator; import java.util.Set; import java.util.TreeSet; /** * POJ 1177 (线段树+离散化+扫描线)，题目链接为http://poj.org/problem?id=1177
HTTP协议详解 chicony http协议
引言
Scala设计模式 chenchao051 设计模式 scala
Scala设计模式我的话：在国外网站上看到一篇文章，里面详细描述了很多设计模式，并且用Java及Scala两种语言描述，清晰的让我们看到各种常规的设计模式，在Scala中是如何在语言特性层面直接支持的。基于文章很nice，我利用今天的空闲时间将其翻译，希望大家能一起学习，讨论。翻译
安装mysql daizj mysql 安装
安装mysql (1)删除linux上已经安装的mysql相关库信息。rpm -e xxxxxxx --nodeps (强制删除) 执行命令rpm -qa |grep mysql 检查是否删除干净 (2)执行命令 rpm -i MySQL-server-5.5.31-2.el
HTTP状态码大全 dcj3sjt126com http状态码
完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3JnLw%3D%3D在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request
asihttprequest上传图片 dcj3sjt126com ASIHTTPRequest
NSURL *url =@"yourURL"; ASIFormDataRequest*currentRequest =[ASIFormDataRequest requestWithURL:url]; [currentRequest setPostFormat:ASIMultipartFormDataPostFormat];[currentRequest se
C语言中，关键字static的作用 e200702084 C++c C#
在C语言中，关键字static有三个明显的作用： 1)在函数体，局部的static变量。生存期为程序的整个生命周期，（它存活多长时间）；作用域却在函数体内（它在什么地方能被访问（空间））。一个被声明为静态的变量在这一函数被调用过程中维持其值不变。因为它分配在静态存储区，函数调用结束后并不释放单元，但是在其它的作用域的无法访问。当再次调用这个函数时，这个局部的静态变量还存活，而且用在它的访
win7/8使用curl geeksun win7
1. WIN7/8下要使用curl，需要下载curl-7.20.0-win64-ssl-sspi.zip和Win64OpenSSL_Light-1_0_2d.exe。下载地址： http://curl.haxx.se/download.html 请选择不带SSL的版本，否则还需要安装SSL的支持包 2. 可以给Windows增加c
Creating a Shared Repository; Users Sharing The Repository hongtoushizi git
转载自： http://www.gitguys.com/topics/creating-a-shared-repository-users-sharing-the-repository/ Commands discussed in this section: git init –bare git clone git remote git pull git p
Java实现字符串反转的8种或9种方法 Josh_Persistence 异或反转递归反转二分交换反转 java字符串反转栈反转
注：对于第7种使用异或的方式来实现字符串的反转，如果不太看得明白的，可以参照另一篇博客： http://josh-persistence.iteye.com/blog/2205768 /** * */ package com.wsheng.aggregator.algorithm.string; import java.util.Stack; /**
代码实现任意容量倒水问题 home198979 PHP 算法倒水
形象化设计模式实战 HELLO!架构 redis命令源码解析倒水问题：有两个杯子，一个A升，一个B升，水有无限多，现要求利用这两杯子装C
Druid datasource zhb8015 druid
推荐大家使用数据库连接池 DruidDataSource. http://code.alibabatech.com/wiki/display/Druid/DruidDataSource DruidDataSource经过阿里巴巴数百个应用一年多生产环境运行验证，稳定可靠。它最重要的特点是：监控、扩展和性能。下载和Maven配置看这里： http
两种启动监听器ApplicationListener和ServletContextListener spjich java spring 框架
引言:有时候需要在项目初始化的时候进行一系列工作，比如初始化一个线程池，初始化配置文件，初始化缓存等等，这时候就需要用到启动监听器，下面分别介绍一下两种常用的项目启动监听器 ServletContextListener 特点: 依赖于sevlet容器，需要配置web.xml 使用方法: public class StartListener implements
JavaScript Rounding Methods of the Math object 何不笑 JavaScript Math
The next group of methods has to do with rounding decimal values into integers. Three methods — Math.ceil(), Math.floor(), and Math.round() — handle rounding in differen

css+html横纵表头锁定的表格 程序的说明

你可能感兴趣的:(JavaScript,html,css,table,Class,div)

css+html横纵表头锁定的表格程序的说明