js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>table</title>
<style>
.ztable {
table-layout: fixed;
font-size: 12px;
font-family: 微软雅黑;
border-right: 1px solid #D4D4D4;
border-bottom: 1px solid #D4D4D4;
} .ztable th {
background-color: #F0F0F0;
height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-left: 1px solid #D4D4D4;
border-top: 1px solid #D4D4D4;
} .ztable td {
border-left: 1px solid #D4D4D4;
border-top: 1px solid #D4D4D4;
height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<table id="tb_1" cellspacing="0" cellpadding="0" width="600" class="ztable">
<tbody>
<tr align="center">
<th style="width: 100px;">用户编号</th>
<th style="width: 100px;">试用时间</th>
<th style="width: 100px;">转正时间</th>
<th style="width: 100px;">性别</th>
<th>姓名拼音</th>
<th>生日时间</th>
<th>民族</th>
<th>身高</th>
</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用鼠标改变td的宽度，固定table宽度和高度超过显示点的更多相关文章
- c# asp.net 鼠标改变控件坐标位置,更改控件坐标,注册表保存读取,打印,查找局域网内打印机等等收集
界面虽然被我弄的很难看,但功能还可以 里边注册表的路径自己设置一下,或者加一个创建注册表的语句,不然会报错 前台: <%@ Page Language="C#" AutoEv ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 固定Table的头部和左边的列-在Knockout Js使用场景下
要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...
- HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>
<table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...
- layui table动态表头 改变表格头部 重新加载表格
改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...
- Jquery改变td内容为1的颜色
Jquery改变td内容为1的颜色<table id="tb" > <tr> <td val="1">1</td> ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- js获取table checkbox选中行的值.mdjs获取table checkbox选中行的
<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jque ...
- table表格宽度固定，同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
随机推荐
- Basic remains POJ - 2305 同余模 高精度处理
题意 给出B(10以内大于0)进制下 p (1000位以内)和m(9位以内) 求 p%m 在b进制下等于什么 思路: 可以计算 1e9不会溢出Int所以m在int值以内 先求m 要处理p 每 ...
- WIN8.1下Prolific USB-to-Serial Comm Port驱动黄色感叹号问题
文章解决来源:http://blog.csdn.net/gsj0791/article/details/17664861 在做fpga口的uart回环测试时候,由于开发板上的是usb转uart,所以需 ...
- 使用 dmidecode 查看Linux服务器信息
使用 dmidecode 查看Linux服务器信息 来源 http://www.laozuo.org/6682.html 对于大部分普通服务器用户来说,我们选择VPS.服务器产品的时候比较关心的是产 ...
- jQuery 方式模拟提交表单
//add test moudle define(function(require , exports , module) { //=========== 不使用模块化只使用如下代码即可 start ...
- tp5命令行基础介绍
查看指令 生成模块 生成文件 生成类库映射文件 生成路由缓存文件 生成数据表字段缓存文件 指令扩展示例 命令行调试 命令行颜色支持 调用命令 查看指令 命令行工具需要在命令行下面执行,请先确保你的ph ...
- 「POJ - 1003」Hangover
BUPT 2017 summer training (16) #2C 题意 n个卡片可以支撑住的长度是1/2+1/3+1/4+..+1/(n+1)个卡片长度.现在给出需要达到总长度,求最小的n. 题解 ...
- 【AtCoder2134】ZigZag MST（最小生成树）
[AtCoder2134]ZigZag MST(最小生成树) 题面 洛谷 AtCoder 题解 这题就很鬼畜.. 既然每次连边,连出来的边的权值是递增的,所以拿个线段树xjb维护一下就可以做了.那么意 ...
- Naive Operations HDU6315 （杭电多校2G）
让ci = ai / bi, 求sum(ci)的值,因为每次 ai 都是加一的,那么我可以用一颗线段树来维护每个 i 位置的 ai 距离达到 bi 还需要的数的最小值,更新是每次都减一,如果我某一个区 ...
- nodejs的某些api~（三）net模块
net模块和http模块是node最重要的两个模块,前者是基于TCP的封装,后者的本质也是TCP.他们通过 tcp通信,建立一个可以收发消息的web服务器.我在写的作品里面用的express也是封装的 ...
- JQuery选择器，事件，DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...