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" > &nbsp; </ TD >
                        
< TD  class ="th0" > &nbsp; </ 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" > &nbsp; </ TD >
                        
< TD  class ="th4" > &nbsp; </ 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 >
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个简单的购物车表格的示例代码,包括加减按钮和总价小计功能: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: center; padding: 8px; border: 1px solid #ddd; } th { background-color: #f2f2f2; } .total { font-weight: bold; } </style> </head> <body> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>10.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">10.00</td> </tr> <tr> <td>商品2</td> <td>20.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">20.00</td> </tr> <tr> <th colspan="3" class="total">总价</th> <td id="totalPrice">30.00</td> </tr> </tbody> </table> <script> // 获取元素 const reduceBtns = document.querySelectorAll('.reduce'); const addBtns = document.querySelectorAll('.add'); const amountEles = document.querySelectorAll('.amount'); const subtotalEles = document.querySelectorAll('.subtotal'); const totalPriceEle = document.querySelector('#totalPrice'); // 定义变量 let totalPrice = 0; // 绑定事件 for (let i = 0; i < reduceBtns.length; i++) { reduceBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); if (amount > 1) { amount--; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount + 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) - price; totalPriceEle.textContent = totalPrice.toFixed(2); } }); } for (let i = 0; i < addBtns.length; i++) { addBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); amount++; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount - 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) + price; totalPriceEle.textContent = totalPrice.toFixed(2); }); } // 计算初始总价 for (let i = 0; i < subtotalEles.length; i++) { totalPrice += parseFloat(subtotalEles[i].textContent); } totalPriceEle.textContent = totalPrice.toFixed(2); </script> </body> </html> ``` 代码解释: 1. HTML部分:使用`<table>`标签创建表格,包括表头和表体两部分。每个商品行都有一个数量`<td>`单元格,里面包含一个减少按钮、一个显示数量的`<span>`元素和一个增加按钮。总价小计使用`<td>`标记,总价使用`<td>`标记和一个`id`属性。 2. CSS部分:设置表格样式,包括边框、对齐和背景色。 3. JavaScript部分:获取所有需要操作的元素,并定义一个变量`totalPrice`用于统计总价。为减少按钮和增加按钮绑定`click`事件,用于修改数量和小计,并更新总价。在页面加载时计算初始总价。 以上代码仅供参考,实际应用中可能需要根据实际情况进行调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值