关于鼠标位于table的竖线上的响应问题－１００分．．能回答的拿吧．

北京不不 2006-11-17 04:24:11
<table id="b">
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
当我把鼠标放在他的竖线上也就是组成表格的横线．．改变其鼠标标志为hand
...全文
631 41 打赏 收藏 转发到动态 举报
写回复
用AI写文章
41 条回复
切换为时间正序
请发表友善的回复…
发表回复
北京不不 2006-11-20
  • 打赏
  • 举报
 回复
20分给 muxrwc(王辰) ( ) 信誉: 他跟贴很热心。也参与了答问。
15分给 Amwpfiqvy ： 他也答题了。效果不行。比上一个少5分。他么他积极。
50 chaoliu1 ：是少了点。你发条CSDN短信给我。我再去开帖
其他人总不能让人空着回去。
北京不不 2006-11-20
  • 打赏
  • 举报
 回复
chaoliu1(潮流)你要是认为分还少了。。向我索取吧。要不你不跟贴了。。那我很久都不结贴了。
muxrwc 2006-11-20
  • 打赏
  • 举报
 回复
忽忽。。我又溜达回来啦。。
他的思路大概获取TD的高宽，然后当鼠标经过TD的时候判断离左边有多少的距离，在某定距离内就变光标。。。
忽忽。。不过代码仔细看因为不会event。。忽忽温柔的去啦。
北京不不 2006-11-20
  • 打赏
  • 举报
 回复
你的效果是正确的。~~你能稍微解释下么。。。分大部分给你。。
北京不不 2006-11-20
  • 打赏
  • 举报
 回复
chaoliu1(潮流)你解释下你的思路。。判断思路。。。。
北京不不 2006-11-20
  • 打赏
  • 举报
 回复
chaoliu1(潮流) ( ) 信誉：100 Blog
跟贴来了。
chaoliu1 2006-11-20
  • 打赏
  • 举报
 回复
obj.parentElement--是引用 某对象的父元素，就是上一级元素。
例：td的parent通常是tr，tr上一级又是table

因为大部分地方都是td，当td的间距改成1时，2个td之间那1像素才是table，所以用obj.parentElement来获得table对象。

思路就是

1。不停判断鼠标位置
2。if(Math.abs(x1-l)<=2 || Math.abs(x1-l-w)<=2)return true;
如果(鼠标离左线，或离右线的距离小于2像素) 改手形

结果就是鼠标移动竖线周围4像素时，变手
可西哥 2006-11-20
  • 打赏
  • 举报
 回复
还真是这个思路啊。
当时怕麻烦，不敢按这个思路做下去.
收藏了.
discover7 2006-11-18
  • 打赏
  • 举报
 回复
ding!
yougucao379548695 2006-11-18
  • 打赏
  • 举报
 回复
搞定没？
addwing 2006-11-18
  • 打赏
  • 举报
 回复
...
Apq001 2006-11-17
  • 打赏
  • 举报
 回复
这是我的代码经完善后的样子，将其用 attachEven/属性 绑定到任意table对象的相应事件即可即可，函数内容可以一字不改。

function table_onmousemove()
{
event.srcElement.parentNode.parentNode.style.cursor = "auto";
}
function table_onmouseover()
{
if(event.fromElement && event.toElement &&
event.fromElement.tagName =="TD" && event.toElement.tagName =="TD" &&
event.fromElement.parentNode.rowIndex == event.toElement.parentNode.rowIndex )
{
event.fromElement.parentNode.parentNode.style.cursor = "hand";
}
}
chaoliu1 2006-11-17
  • 打赏
  • 举报
 回复
表格位置、大小千变万化，怎么楼上要保存固定表格的线条位置吗？
wideroad 2006-11-17
  • 打赏
  • 举报
 回复
我觉得最好的就是维护一张横线间隙的数据表，然后鼠标移动的时候判断是否在这些数据之内
doggod2008 2006-11-17
  • 打赏
  • 举报
 回复
我copy你的代码也就5秒而已。呵呵
Apq001 2006-11-17
  • 打赏
  • 举报
 回复
不过，我用时也就20分钟左右。呵呵。
Apq001 2006-11-17
  • 打赏
  • 举报
 回复
利用两个事件，事件用于Table：
function table_onmousemove()
{
table.style.cursor = "auto";//恢复鼠标为普通样式
}
function table_onmouseover()
{
if(event.fromElement && event.toElement &&
event.fromElement.tagName =="TD" && event.toElement.tagName =="TD" &&
event.fromElement.parentNode.rowIndex == event.toElement.parentNode.rowIndex )
{
table.style.cursor = "hand";//设为手形
}
}
============
相信都能看懂怎么用这两个函数吧？
Apq001 2006-11-17
  • 打赏
  • 举报
 回复
我也研究出一种方案。
但我这个方案目前还不能让放到表格左右框的时候也出现手形。
chaoliu1 2006-11-17
  • 打赏
  • 举报
 回复
太急，有点错误。最左和最右没判断到。

改成：

function pos() {
var obj=event.srcElement;t=0;l=0;w=0;h=0;x1=0;y1=0;
for(var i=0;i<10;i++)if(obj.tagName!=="TABLE")obj=obj.parentElement;
w=event.srcElement.offsetWidth;
h=event.srcElement.offsetHeight;
t=obj.offsetTop+event.srcElement.offsetTop;
l=obj.offsetLeft+event.srcElement.offsetLeft;
x1=event.x+document.body.scrollLeft;
y1=event.y+document.body.scrollTop;
window.status="离左线"+Math.abs(x1-l)+",离右线"+Math.abs(x1-l-w)+",　x="+x1+",y="+y1+",　"+event.srcElement.tagName+event.srcElement.innerText;
if(Math.abs(x1-l)<=2 || Math.abs(x1-l-w)<=2)return true;
return false;
}


你们先研究讨论，我得回家吃饭了。
chaoliu1 2006-11-17
  • 打赏
  • 举报
 回复
IE6中通过了，楼主自己去看吧。

花去我2小时。　如果你还有颗仁慈的心，请多加些分吧。　不然太打击我



<head>
<STYLE>
body{background-color:background;margin:10}
table{border-collapse:collapse;myhyli:expression(this.cellSpacing=0);background-color:#aaffaa}
TD{border-left:1 solid #000000;border-right:1 solid #000000;border-top:1 solid #100000;border-bottom:1 solid #100000;}
</style>
</head>
<body>
<table width=400 height=300 id='b'">
<tr>
<td>a</td><td>a</td><td>a</td>
</tr>
<tr>
<td>b</td><td>b</td><td>b</td>
</tr>
<tr>
<td>c</td><td>c</td><td>c</td>
</tr>
</table>
</body>
<script language=javascript>
function f(){
if(pos()){
document.body.style.cursor="hand";}
else{
document.body.style.cursor="";
}
}


function pos() {
var obj=event.srcElement;t=0;l=0;w=0;h=0;x1=0;y1=0;
for(var i=0;i<10;i++)if(obj.tagName!=="TABLE")obj=obj.parentElement;
w=obj.offsetWidth;
h=obj.offsetHeight;
t=obj.offsetTop+event.srcElement.offsetTop;
l=obj.offsetLeft+event.srcElement.offsetLeft;
x1=event.x+document.body.scrollLeft;
y1=event.y+document.body.scrollTop;
window.status="离最近竖线还有"+Math.abs(x1-l)+",x="+x1+",y="+y1+","+event.srcElement.tagName+event.srcElement.innerText;
if(Math.abs(x1-l)<=3 || Math.abs(x1-l+w)<=3)return true;
return false;
}

//遍历
var tds = document.getElementsByTagName("TD");
for(var i=0; i<tds.length; i++ )
{
tds[i].innerText=i;
tds[i].attachEvent("onmousemove",f);


}
</script>
加载更多回复（21）
第三方插件vue-table-with-tree-grid使用及插件参数使用说明
1.安装vue-table-with-tree-grid npm i vue-table-with-tree-grid -S 2.在main.js中引入 import treeTab from 'vue-table-with-tree-grid' 3.在main.js中引入 注册全局组件Vue.component('tree-table', treeTab) vue-table-with-tree-grid插件参数使用说明： 1.data:指定.
电脑小问题不求人
电脑小问题不求人--鼠标.软驱.打印机.硬盘.风扇.常见事故处理鼠标鼠标的故障分析与维修比较简单，大部分故障为接口或按键接触不良、断线、机械定位系统污垢等原因造成的。少数故障为鼠标内部元器件或电路虚焊造成的，这主要存在于某些劣质产品中，其中尤以发光二极管、IC电路损坏居多。 　鼠标按键失灵怎么办  　1、鼠标按键无动作，这可能是因为鼠标按键和电路板上的微动开关距离太远，或点击开
bootstrap排版、代码、表格
bootstrap的排版、代码、表格 bootstrap的排版、代码、表格主要就是介绍bootstrap提供的预置的类供使用。 排版： 1 标题 。      h1-h6   small标签代表副标题 2 页面主体 。     bootstrap将全局font-size设置为14px，line-height设置为1.428.这些属性直接赋予元素和所有段落元素。另外元素
Bootstrap 表格
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 table 为表格添加基础样式。 thead 表格标题行的容器元素（tr），用来标识表格列。 tbody 表格主体中的表格行的容器元素（tr）。 tr 一组出现在单行上的表格单元格的容器元素（td 或 th）。 td 默认的表格单元格。 th 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 thead 内使用。
display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display：talbe来实现的，但是用户最近说要让表格列宽可以拖动；所有我就寻找了好多的办法；网上找了很多的资料，但是都不是我要的效果因为他们都是列宽不改变要不就是我看不懂！ 我模仿网上的核心代码来自己写了一个；因为我们知道display：table标签最后再页面展示的还是table表格所以我就在页面的最后面来更改table的样式： 思路：
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章