在不影响定位的情况下在Vanilla JavaScript中调整表的大小 [英] Resizing tables in vanilla JavaScript without affecting positioning
本文介绍了在不影响定位的情况下在Vanilla JavaScript中调整表的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试调整第th个元素的大小,而不影响该行中下一个th的位置,例如,我希望th的宽度会影响下一个th的宽度,因此不将其推向左侧.
I'm trying to resize a th element without affecting the position of the next th in the row, for example I want that the width of the th would affect the width of the next th accordingly not pushing it to the left.
这是我已经拥有的代码.
Here's my code that I have already.
(function () {
var thElm;
var startOffset;
Array.prototype.forEach.call(
document.querySelectorAll("table th"),
function (th) {
th.style.position = 'relative';
var grip = document.createElement('div');
grip.innerHTML = " ";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = '5px';
grip.style.position = 'absolute';
grip.style.cursor = 'col-resize';
grip.addEventListener('mousedown', function (e) {
thElm = th;
startOffset = th.offsetWidth - e.pageX;
});
th.appendChild(grip);
});
document.addEventListener('mousemove', function (e) {
if (thElm) {
thElm.style.width = startOffset + e.pageX + 'px';
}
});
document.addEventListener('mouseup', function () {
thElm = undefined;
});
})();
我的代码的工作示例.
(function () {
var thElm;
var startOffset;
Array.prototype.forEach.call(
document.querySelectorAll("table th"),
function (th) {
th.style.position = 'relative';
var grip = document.createElement('div');
grip.innerHTML = " ";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = '5px';
grip.style.position = 'absolute';
grip.style.cursor = 'col-resize';
grip.addEventListener('mousedown', function (e) {
thElm = th;
startOffset = th.offsetWidth - e.pageX;
});
th.appendChild(grip);
});
document.addEventListener('mousemove', function (e) {
if (thElm) {
thElm.style.width = startOffset + e.pageX + 'px';
}
});
document.addEventListener('mouseup', function () {
thElm = undefined;
});
})();
table {
table-layout: fixed;
width: 100px;
border-width: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
overflow-x: auto;
}
table tr {
box-sizing: content-box;
}
table th {
height: 50px;
width: 20px;
border-width: 1px;
border-style: solid;
border-color: black;
box-sizing: border-box;
user-select: none;
}
<table>
<thead>
<tr style="width: 100%;">
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 3</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
<th style="width: 300px">th 1</th>
<th style="width: 150px">th 2</th>
</tr>
</thead>
</table>
谢谢!
推荐答案
嘿,我想通了.这是代码.
Hey guys I figured it out. here's the code.
resizeable() {
let startOffset;
let thElements = this.container.querySelectorAll("th");
for(let i = 0; i < thElements.length; i++) {
let currentElement = thElements[i];
currentElement.style.position = 'relative';
let grip = document.createElement('div');
grip.innerHTML = " ";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = '5px';
grip.style.position = 'absolute';
grip.style.cursor = 'col-resize';
currentElement.appendChild(grip);
EventManager.on(grip, 'mousedown', (e)=> {
let nextItem = thElements[i + 1];
let currentElement = thElements[i];
let originalNextItemWidth = nextItem.getBoundingClientRect().width;
let originalCurrentItemWidth = currentElement.getBoundingClientRect().width;
startOffset = currentElement.offsetWidth - e.pageX;
EventManager.on(document.body, 'mousemove', (e)=> {
// Subtract that difference from the next items width
if (currentElement) {
currentElement.style.width = startOffset + e.pageX + 'px';
let offset = originalCurrentItemWidth - currentElement.getBoundingClientRect().width;
nextItem.style.width = (originalNextItemWidth + offset) + 'px';
}
});
});
EventManager.on(document.body, 'mouseup', (e)=> {
EventManager.off(document.body, 'mousemove');
currentElement = null;
});
}
}
这篇关于在不影响定位的情况下在Vanilla JavaScript中调整表的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文