<!DOCTYPE html>
<html>
<head>
<title>演示</title>
<style>
.resizeBox {}
table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
th {
background: #ccc;
}
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="resizeBox">
<table id="resizeTable">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行</td>
<td>第1行</td>
<td>第1行</td>
</tr>
<tr>
<td>第2行</td>
<td>第2行</td>
<td>第1行</td>
</tr>
<tr>
<td>第3行</td>
<td>第3行</td>
<td>第1行</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
window.onload = function () {
init('resizeTable')
function init(id) {
var i,
self,
table = document.getElementById(id),
header = table.rows[0],
tableX = header.clientWidth,
length = header.cells.length;
for (i = 0; i < length; i++) {
header.cells[i].onmousedown = function () {
self = this;
if (event.offsetX >
self.offsetWidth -
10) {
self.mouseDown = true;
self.oldX = event.x;
self.oldWidth = self.offsetWidth;
}
};
header.cells[i].onmousemove = function () {
if (event.offsetX > this.offsetWidth - 10) {
this.style.cursor = 'col-resize';
} else {
this.style.cursor = 'default';
}
if (self == undefined) {
self = this;
}
if (self.mouseDown != null && self.mouseDown == true) {
self.style.cursor = 'default';
if (self.oldWidth + (event.x - self.oldX) > 0) {
self.width = self.oldWidth + (event.x - self.oldX);
}
self.style.width = self.width;
table.style.width = tableX + (event.x - self.oldX) + 'px';
self.style.cursor = 'col-resize';
}
};
table.onmouseup = function () {
if (self == undefined) {
self = this;
}
self.mouseDown = false;
self.style.cursor = 'default';
tableX = header.clientWidth;
};
}
};
}
</script>
</html>
拼多多集团-PDD公司氛围 512人发布
，打了好几次
查看7道真题和解析