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;}
随机推荐
- X问题 HDU - 1573（excrt入门题）
X问题 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- GCD HDU - 2588
输入 N 和 M (2<=N<=1000000000, 1<=M<=N), 找出所有满足1<=X<=N 且 gcd(X,N)>=M 的 X 的数量. Inpu ...
- Mysql 函数大全- 5.6 中文解释函数参考
mysql 函数大全 5.6 函数参考 5.6函数参考 (只翻译部分,细节查看相关英文版) 12.1功能和操作员参考 12.2表达式评估中的类型转换 12.3运营商 12.4控制流功能 12.5 ...
- noiac64 sort (二分答案)
首先如果L=1,那就可以直接用一个优先队列来做 但它并不是1 所以要换个做法 假设我们已经知道第L的数是x,第R的数是y 那其实就只需要找到[x+1,y+1]这一段,然后再加上一定数量的x和y就是答案 ...
- uWSGI+Nginx安装、配置
1.关闭SELINUX: [root@PYTHON27 /]# vim /etc/selinux/config 将SELINUX=enforcing修改为SELINUX=disabled 2.关闭防火 ...
- 【NOIP数论内容整理】
转载{大佬传送门} 附赠wakelin一句评论:日均二百七,全场rank1:千古神犇ZAY,吊打清华钟皓曦%%%
- java ssl 使用不同的加密套件，对性能影响很大
一直以来都是使用java默认的[加密套件]来处理ssl请求,突然有一天我尝试显式的设置了一组加密套件后,发现图片显示的速度明显快了一倍左右. 经过使用几组不同的加密套件测试后,发现使用 TLS_ECD ...
- 第二十五篇-Android 应用资源
这里介绍android的一些资源文件. 以一个登录界面为例. layout.xml <?xml version="1.0" encoding="utf-8" ...
- JS重点整理之JS原型链彻底搞清楚
对象 要清楚原型链,首先要弄清楚对象: 普通对象 最普通的对象:有__proto__属性(指向其原型链),没有prototype属性. 原型对象(person.prototype 原型对象还有cons ...
- gitlab 500 服务器错误 重启解决了
查看状态 sudo gitlab-ctl status # 启动Gitlab所有组件 sudo gitlab-ctl start # 停止Gitlab所有组件 sudo gitlab-ctl stop ...