废话不多说，直接上代码，代码比较简单，相信初学者一眼也可以看懂。
实现思路：
先声明一个数组，在每次拖动时将每列的宽记录下来，然后让鼠标拖动，然后，通过this知道自己拖动的是哪列，然后在数组中修改相应的宽度，最后通过JavaScript重新给表格的每一列赋值，而数组就是他们每列的宽度
具体实现：
编写css样式
::-webkit-scrollbar {
width: 4px;
height: 5px;
background-color: #000;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.5);
}
#sec_o-gl {
width: 100%;
overflow: hidden;
height: 100%;
position: relative;
}
.demo {
overflow: auto;
margin: 0;
height: 500px;
}
.table {
display: block;
border-spacing: 0;
position: relative;
padding: 0;
}
.thead tr th {
border-right: 2px solid #ccc;
width: 150px;
height: 40px;
font-weight: 100;
background-color: #d8dadb;
}
tbody td {
color: #000;
border-bottom: 1px solid #ccc;
padding: 0 0;
width: 150px;
text-align: center;
height: 30px !important;
border-right: 2px solid #ccc;
font-size: 12px;
}
.thead th:first-child {
width: 60px;
}
tbody td:first-child {
width: 60px;
}
.thead th:nth-child(3) {
width: 250px;
}
tbody td:nth-child(3) {
width: 250px;
}
tbody tr td a {
display: block;
width: 70px;
height: 25px;
font-size: 12px;
line-height: 25px;
margin: auto;
border: 1px solid #000;
color: #666;
text-decoration: none;
}
tbody tr td a:hover {
border: 1px solid #18c2f9;
color: #18c2f9;
}
tbody tr td input {
width: 15px;
height: 15px;
}编写html代码
<div id="sec_o-gl">
<div class="demo">
<table id="table" cellspacing="0">
<thead class="thead">
<tr>
<th></th>
<th>操作</th>
<th>任务名称</th>
<th>任务完成标准</th>
<th>任务开始时间</th>
<th>任务要求完成时间</th>
<th>任务负责人</th>
<th>任务验收人</th>
<th>完成进度</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>22</td>
<td>33</td>
<td>我的项目我做主，你们不用管</td>
<td>23422342</td>
<td>22</td>
<td>33</td>
<td>547547</td>
<td>23422342</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>33</td>
<td>我的项目我做主，你们不用管</td>
<td>23422342</td>
<td>22</td>
<td>33</td>
<td>547547</td>
<td>23422342</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>33</td>
<td>我的项目我做主，你们不用管</td>
<td>23422342</td>
<td>22</td>
<td>33</td>
<td>547547</td>
<td>23422342</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>33</td>
<td>我的项目我做主，你们不用管</td>
<td>23422342</td>
<td>22</td>
<td>33</td>
<td>547547</td>
<td>23422342</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</div>最重要的一步，编写js逻辑
window.onload = function () {
var sec_gl = document.getElementById("sec_o-gl");
// 获取父节点的宽
var sec_g_w = parseInt(getComputedStyle(sec_gl, null).width);
// 获取table表格
var secRList = document.getElementById("table");
var TableWidth = 150; //表格的宽度
// 初始化表格的宽
function initialData() {
// 初始化表格和表格父元素的宽
secRList.style.cssText = "width:" + TableWidth * secRList.rows[0].cells.length + "px;border-spacing:0;";
var par = secRList.parentNode;
par.style.cssText = "width:" + sec_g_w + "px;";
}
initialData();
// var一个变量，以便以定义表格的长度
var secWidth=0;
function getTableWidth() {
// 初次查找table表格的长度
secWidth = parseInt(getComputedStyle(secRList, null).width);
return secWidth;
}
// 变量，保存当前td盒子的一些数据
var self;
// 保存表格每个td宽的盒子
var TWidth = [];
var W = getTableWidth();
// 表格的拖拽事件
function Tabledrag() {
for (var i = 0; i < secRList.rows[0].cells.length; i++) {
secRList.rows[0].cells[i].index = i;
secRList.rows[0].cells[i].onmousedown = function (event) {
self = this;
self.isFoce = true;
self.width = self.offsetWidth;
self.x = event.x;
self.index = this.index;
if (self.index == secRList.rows[0].cells.length - 1) {
self.isFoce = false;
}
for (var j = 0; j < self.parentNode.cells.length; j++) {
TWidth.push(parseInt(getComputedStyle(self.parentNode.cells[j], null).width));
}
};
secRList.rows[0].cells[i].onmouseup = function (event) {
if (self == undefined) {
self = this;
}
self.isFoce = false;
TWidth = [];
W = getTableWidth();
};
secRList.rows[0].cells[i].onmousemove = function (event) {
if (event.offsetX > this.offsetWidth - 5) {
this.style.cursor = "col-resize"
} else {
this.style.cursor = "default"
}
if (self == undefined) {
self = this;
}
if (self.isFoce) {
var width = parseInt(self.width) + (event.clientX - self.x);
var t = parseInt(W) + (event.clientX - self.x);
secRList.style.cssText = "width:" + t + "px;";
self.style.cssText = "width:" + width + "px;cursor:col-resize;";
for (var j = 0; j < self.parentNode.cells.length; j++) {
if (j !== self.index) {
self.parentNode.cells[j].style.cssText = "width:" + TWidth[j] + "px;";
gs(self, width);
if (self.index !== 1 && self.index !== 0) {
canshu(self);
}
}
}
}
}
}
}
var tbody = document.getElementsByTagName("tbody")[0];
function gs(self, width) {
for (var i = 0; i < tbody.rows.length; i++) {
tbody.rows[i].cells[self.index].style.width = width + "px";
}
}
var data = []; //保存表格内容的盒子，以防数据丢失
function canshu(self) {
var width = parseInt(getComputedStyle(self, null).width);
var w = parseInt(width / 12);
for (var c = 0; c < tbody.rows.length; c++) {
var text = tbody.rows[c].cells[self.index].innerText;
var texTLength = text.length;
if (texTLength > (w + 2)) {
tbody.rows[c].cells[self.index].innerText = text.slice(0, w) + "...";
} else {
tbody.rows[c].cells[self.index].innerText = data[c][self.index];
}
}
}
function Flt() {
for (var v = 0; v < tbody.rows.length; v++) {
data[v] = [];
for (var q = 2; q < tbody.rows[v].cells.length; q++) {
var texTO = tbody.rows[v].cells[q].innerText;
data[v][q] = texTO;
}
}
for (var i = 0; i < tbody.rows.length; i++) {
for (var j = 2; j < tbody.rows[i].cells.length; j++) {
var width = parseInt(getComputedStyle(tbody.rows[i].cells[j], null).width);
var w = parseInt(width / 12);
var text = tbody.rows[i].cells[j].innerText;
var texTLength = text.length;
if (texTLength >= w) {
tbody.rows[i].cells[j].innerText = text.slice(0, w) + "...";
}
}
}
}
Flt(); //初次探测表格数据的方法
Tabledrag(); //表格拖拽效果的方法
}下面是点击任意行并高亮
下面的方法比较笨拙，是通过遍历的方式给每个td标签加上点击事件的，如果没有此需求可以删除此方法
var c = 1; //普通的条件变量
const bgcolor = "#dbe5e9"; //添加高亮的颜色
// 下面的方法比较笨拙，是通过遍历的方式给每个td标签加上点击事件的，如果没有此需求可以删除此方法
function click_lb() {
var div = document.createElement("div");
// 添加一个遮罩层
div.className = "Cover";
sec_gl.appendChild(div);
var cover = document.getElementsByClassName("Cover")[0];
var style = document.getElementsByTagName("style")[0];
var str = " position: fixed; z-index:20; word-wrap:break-word; padding:20px 20px; width:300px; border:6px solid #ccc; text-align: center; color: #fff; background-color:rgba(0,0,0,0.5); top:50%; margin-top: -50px; margin-left:-150px; left:50%; display: none;word-wrap:break-word;"; //文字层的css样式
style.appendChild(document.createTextNode(".Cover{" + str + "}"));
for (var i = 1; i < secRList.rows.length; i++) {
secRList.rows[i].index = i;
for (var j = 1; j < secRList.rows[i].cells.length; j++) {
secRList.rows[i].cells[j].index = j;
secRList.rows[i].cells[j].onclick = function (e) {
e.preventDefault()
if (!this.parentNode.className) {
const on = this.parentNode.parentNode.querySelector(".gl-text");
if (c != 1) {
on.classList.remove("gl-text")
on.style.cssText = "background-color:none;";
}
this.parentNode.classList.add("gl-text")
this.parentNode.style.cssText = "background-color:" + bgcolor + ";";
c++;
}
};
// 双击事件
secRList.rows[i].cells[j].ondblclick = function (e) {
e.preventDefault()
if (data[this.parentNode.index - 1][this.index] != undefined && data[this.parentNode.index - 1][this.index] != "") {
cover.style.display = "block";
cover.innerHTML = "<h4>" + secRList.rows[0].cells[this.index].innerText + "</h4>" + data[this.parentNode.index - 1][this.index];
cover.getElementsByTagName("h4")[0].style.cssText = "font-size: 18px; padding: 0; color: #e3d7d8; margin: 0 0 5px 0;";
}
}
}
}
window.onclick = function (e) {
if (e.target != cover && e.target != cover.getElementsByTagName("h4")[0]) {
cover.style.display = "none";
cover.innerText = "";
}
}
}实现效果：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
