JS實(shí)現(xiàn)可改變列寬的table實(shí)例

           

          <!DOCTYPE HTML> 
          <html> 
          <head> 
          <meta charset="gbk"> 
          <title>table</title> 
          </head> 
          <body> 
          <table id="tb_1" cellspacing="0" cellpadding="2" width="100%" border="1"> 
          <tbody> 
          <tr align="center" bgcolor="#dcdcdc"> 
          <td style="width:100px;">用戶編號(hào)</td> 
          <td>試用時(shí)間</td><td>轉(zhuǎn)正時(shí)間</td><td>性別</td><td>姓名拼音</td> 
          <td>生日時(shí)間</td><td>民族</td><td>身高</td> 
          </tr> 
          <tr> 
          <td>2000001</td> 
          <td>1997-3-13</td><td>1997-3-13</td><td>1</td><td>WZJ</td> 
          <td>1965-3-13</td><td></td><td>171</td> 
          </tr> 
          <tr> 
          <td>2000045</td> 
          <td>2001-2-15</td><td>2001-3-15</td><td>0</td><td>WY</td> 
          <td>1978-8-5</td><td></td><td>162</td> 
          </tr> 
          <tr> 
          <td>2000046</td> 
          <td>2001-2-23</td><td>2001-3-23</td><td>0</td><td>LQ</td> 
          <td>2001-2-23</td><td></td><td>171</td> 
          </tr> 
          </tbody> 
          </table> 
          <script type="text/javascript"> 
          var tTD; //用來存儲(chǔ)當(dāng)前更改寬度的Table Cell,避免快速移動(dòng)鼠標(biāo)的問題 
          var table = document.getElementById("tb_1"); 
          for (j = 0; j < table.rows[0].cells.length; j++
          table.rows[
          0].cells[j].onmousedown = function () 
          //記錄單元格 
          tTD = this
          if (event.offsetX > tTD.offsetWidth - 10
          tTD.mouseDown 
          = true
          tTD.oldX 
          = event.x; 
          tTD.oldWidth 
          = tTD.offsetWidth; 
          }
           
          //記錄Table寬度 
          //
          table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement; 
          //
          tTD.tableWidth = table.offsetWidth; 
          }

          table.rows[
          0].cells[j].onmouseup = function () 
          //結(jié)束寬度調(diào)整 
          if (tTD == undefined) tTD = this
          tTD.mouseDown 
          = false
          tTD.style.cursor 
          = 'default'; 
          }

          table.rows[
          0].cells[j].onmousemove = function () 
          //更改鼠標(biāo)樣式 
          if (event.offsetX > this.offsetWidth - 10
          this.style.cursor = 'col-resize'; 
          else 
          this.style.cursor = 'default'; 
          //取出暫存的Table Cell 
          if (tTD == undefined) tTD = this
          //調(diào)整寬度 
          if (tTD.mouseDown != null && tTD.mouseDown == true
          tTD.style.cursor 
          = 'default'; 
          if (tTD.oldWidth + (event.x - tTD.oldX)>0
          tTD.width 
          = tTD.oldWidth + (event.x - tTD.oldX); 
          //調(diào)整列寬 
          tTD.style.width = tTD.width; 
          tTD.style.cursor 
          = 'col-resize'; 
          //調(diào)整該列中的每個(gè)Cell 
          table = tTD; while (table.tagName != 'TABLE') table = table.parentElement; 
          for (j = 0; j < table.rows.length; j++
          table.rows[j].cells[tTD.cellIndex].width 
          = tTD.width; 
          }
           
          //調(diào)整整個(gè)表 
          //
          table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth); 
          //
          table.style.width = table.width; 
          }
           
          }

          }
           
          </script> 
          </body> 
          </html> 


          posted on 2013-09-01 23:27 我為J狂 閱讀(875) 評(píng)論(1)  編輯  收藏 所屬分類: Web

          評(píng)論

          # re: JS實(shí)現(xiàn)可改變列寬的table實(shí)例 2013-11-23 18:16 鳳凰

          很好,能用!謝謝!!  回復(fù)  更多評(píng)論   

          <2025年5月>
          27282930123
          45678910
          11121314151617
          18192021222324
          25262728293031
          1234567

          導(dǎo)航

          統(tǒng)計(jì)

          常用鏈接

          留言簿(11)

          隨筆分類(48)

          文章分類(29)

          常去逛逛

          搜索

          積分與排名

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 沙田区| 通城县| 虎林市| 东乡县| 江西省| 八宿县| 乳源| 颍上县| 漳浦县| 札达县| 阿克苏市| 乌苏市| 阳西县| 逊克县| 南木林县| 蒲江县| 洱源县| 浠水县| 车致| 平塘县| 宁安市| 平果县| 馆陶县| 安化县| 油尖旺区| 永嘉县| 宾川县| 石楼县| 凌海市| 江阴市| 平阳县| 临漳县| 鸡西市| 沧州市| 靖宇县| 屏东市| 维西| 澄迈县| 竹山县| 岢岚县| 嘉义县|