js 實現table每列可左右拖動改變列寬度

阿新 • • 發佈：2019-01-12

<!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;">使用者編號</td> 
<td>試用時間</td><td>轉正時間</td><td>性別</td><td>姓名拼音</td> 
<td>生日時間</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; //用來儲存當前更改寬度的Table Cell,避免快速移動滑鼠的問題 
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 () { 
//結束寬度調整 
if (tTD == undefined) tTD = this; 
tTD.mouseDown = false; 
tTD.style.cursor = 'default'; 
}; 
table.rows[0].cells[j].onmousemove = function () { 
//更改滑鼠樣式 
if (event.offsetX > this.offsetWidth - 10) 
this.style.cursor = 'col-resize'; 
else 
this.style.cursor = 'default'; 
//取出暫存的Table Cell 
if (tTD == undefined) tTD = this; 
//調整寬度 
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); 
//調整列寬 
tTD.style.width = tTD.width; 
tTD.style.cursor = 'col-resize'; 
//調整該列中的每個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; 
} 
//調整整個表 
//table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth); 
//table.style.width = table.width; 
} 
}; 
} 
</script> 
</body> 
</html>

js 實現table每列可左右拖動改變列寬度

<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>table</title> </head> <bod

可左右拖動視窗demo

<p>See the Pen <a href='https://codepen.io/maoyonglong/pen/BvOJRJ/'>dragbar-demo</a> by maoyonglong (<a href='https://codepen.io/maoy

MUI 頂部選項卡-可左右拖動(div)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>頂部選項卡-可左右拖動</title><meta name="viewport"

原生js實現table列寬的滑鼠拖動事件

var tTD; //用來儲存當前更改寬度的Table Cell,避免快速移動滑鼠的問題 var table = document.getElementById("tableId"); //table的id名稱 for (j = 0; j < table.rows[0].cells.le

實現可調整寬高的DIV（左右拖動和上下拖動）

前言本例是在React中實現，不過改一改通過原生js也很好實現，另外相容性也做到了IE9。（IE8講道理也是可以的）。首先看一下需要實現的需求：要拖動圖中的白色橫條調整綠色和藍色區域的高度，要拖動白色豎條調整左邊區域和紅色區域的寬度。一兩年前曾經遇到過這個需求，當時直接在網上搜了個解決方案

table實現列寬的拖動效果

部門有一個專案介面用的html，所有的列表都用的原生table控制元件，一個同事找到我問有沒有辦法實現table的列寬拖動，好幾年沒摸過前臺了，還真給問住了，經過網上查詢資料等，最終解決，記錄下： <!DOCTYPE html> &l

用php+ajax+echarts.js 實現統計每分鐘答題曲線圖

charts value sla 曲線圖 alc tel title java end 接著上一篇博客，除了實現統計總量外，我還用百度的echart實現了統計答題曲線圖。效果如下：http://newer.gailvlunpt.com/EntranceEducation/

JS實現雙擊編輯可修改

需求 ner cli 技術 reat tex 復制 sele election 需求描述：在一段文字處雙擊可以進行修改，也就是雙擊後創建輸入框，輸入內容，在輸入框失去焦點後將輸入的內容再以文字的形式顯示出來，以下是html代碼： 1 <fieldset> 2

js 實現 table 行上移（資料庫）

通過js實現表格行的上下移動，有兩種情況： 1、只對顯示層操作（即只針對頁面的移動並不更新到資料庫） 2、顯示層的移動更新到資料庫中下面我分佈就這兩種方式的實現進行說明（我使用的是jquery ea

原生JS實現移動端模組的左右滑動切換效果，基於vue、stylus

原生JS實現移動端模組的左右滑動動畫效果，基於vue、stylus 大概實現方案：手指touch螢幕的整個過程，會派發touchstart、touchmove、touchend三個事件，對這三個事件設定相應函式，通過移動過程中位置的變化計算出偏移值，進行對應的設定。注：

jQuery外掛來調整表列的大小colResizable.js 拖動改變單元格寬度

jQuery外掛來調整表列的大小效果圖： colResizable colResizable是一個免費的jQuery外掛，旨在通過手動拖動列錨點來增強任何型別的HTML表物件，從而增加列重新調整大小的功能。它相容滑鼠和觸控裝置，並具有一些

原生js 實現table 被選中行變顏色

最近在做一個專案,因為框架原因,所有功能只能使用原生js開發(真的無語),碰到"實現table 被選中行變顏色"的需求,就在網上找了下,然後寫了一個js方法,只需要changeColorWithTrs(tableid)就可以實現(ps:也是為了自己方便引用,只要把table的

DataGrid實現拖動任意列的列頭改變列寬度時,讓其他列的寬度和他一樣寬

首先建立列頭的ColumnHeaderStyle: <DataGrid.ColumnHeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}">

用js實現table內容從下到上連續滾動

網上有很多用ul實現新聞列表滾動的例子，但是很少有直接用table實現列表內容滾動的例子，而Marquee標籤滾動的效果不是很好，於是就自己寫了一個，提供給攻城師朋友們參考實現思路：由於table包含標題和內容，實際上理想的效果是標題不動，內容滾動，於是把標題和內容拆分出

js 實現table標題固定

使用ScrollTableFixed外掛可以很好的實現這一效果，他的github地址：https://github.com/doska80/ScrollTableFixed，demo地址如下：

js實現字型和容器寬高隨視窗改變

用於字型大小和容器的寬高字型和寬高設為rem就可以了 var html = document.documentElement; 　　function fonts(){ 　　var hW = html.offsetWidth; 　　var&

Qt佈局管理QSplitter：設計一個分割視窗功能，整個視窗由三個子視窗組成，各個子視窗之間的大小可隨意拖拽改變（註釋詳細）

新建專案，基類選擇“QMainWindow”。 main.cpp中的程式碼： #include "mainwindow.h" #include <QApplication> #include <QSplitter> #include <QTe

Android 自定義View 之可隨意拖動的View

因為趕專案本人停更兩個月從今天開始又可以更新了今天說一下這個可隨意拖動的view 簡單說一下這個view效果和發展一開始這種效果是使用在網頁端的特別是購物類例如某寶某東購物車和客服視窗都有使用這個懸浮可拖動的設計效果後來才發展到的移動端還有

js 實現寬高相等隨手機螢幕大小改變

讓圖片隨螢幕大小而改變並且保持高寬比例一樣假設一張圖片為實際螢幕的50%的寬度，需要高度=寬度，用css是很難完成的，但是用js實現還是挺簡單的 //獲取元素寬度 var imgWidth = document.querySelector(".productimg").getBoundingC

前端實現在一定範圍內的拖動(easyui)

html:<div class="easyui-draggable floating"data-options="onDrag:onDrag,onStopDrag:onStopDrag"></div>js:function onDrag(e) {var

js 實現table每列可左右拖動改變列寬度

相關推薦