最近在做一个在线画table的东东,javascript实现。
在做一些算法时,需要用到offsetLeft,offsetWidth等一些属性,这些东东在ie下用得很好,但是到了firefox出了些问题。
简单描叙下:
[code="java"]
function testThisOffset(o){
if(o.tagName == 'TD')
o=o.parentNode;
var warnings ="";
for(var q=0;q<o.cells.length;q++){
var oTd = o.cells[q];
warnings +="**************\n";
warnings +=" cell "+q+":"+oTd.offsetLeft+","+oTd.offsetWidth+"\n";
}
alert(warnings);
}
[/code]
打印一行中,每个单元格的offsetLeft以及offsetWidth值。
firefox中,出现了如下值:
[code="java"]
**************
cell 0:1,140 // 0为cellIndex,1为该单元格offsetLeft,140为该单元格offsetWidth
**************
cell 1:141,140
**************
cell 2:281,140
**************
[b]cell 3:420,140[/b]
[/code]
cell 0,1,2没问题,但是cell 3出现了问题,因为其 offsetLeft值为420 是小于cell2的281+140的,
问:这是为何了,有什么办法可以保:nextCell.offsetLeft>=cell.offsetLeft+cell.offsetWidth?
[b]问题补充:[/b]
ps1:
三楼提供的方法我早已尝试,数据还是存在类似的问题,
[b]问题补充:[/b]
ps2.真是头疼啊 表格中的同一列竟然也有offsetLeft不同的情况
IE中堪称完美,到了firefox竟然这么多问题.
firefox真的比IE好吗?
[b]问题补充:[/b]
多谢三楼同志的关注,我也看了文档。
有如下:
[b]That is to say, Firefox 2 includes any border width of the offsetParent element when calculating offsetLeft whereas Firefox 3 ignores this setting. [/b]
我的是firefox3,所以应该是把offsetparent的border忽略了
这个javaeye现在搞成这样了,发帖都不容易了 诶
[b]问题补充:[/b]
不知道有解决办法没
不然就只能采取一个不是办法的办法
把两个offsetLeft之间绝对值<=1的 就算相等了
不过这样感觉 很别扭
继续求好的方法
[b]问题补充:[/b]
我的这个没有涉及到div 纯table td 有style
[b]问题补充:[/b]
我觉得可能不是获取值的方法出问题了 可能是firefox本身的问题了
现在是两个td的相对比较,
如果三楼同学的 加上offsetParent的boader,这两个都要加上啊,这两个相邻td同一个offsetParent
所以加上后虽然单个绝对位置值变化了,但是两个各之间相对值还是没变地
依然是:
前一个Td的offsetLeft+前一个TD的offsetWidth大于后一个td的offsetLeft
莫名其妙的问题啊
ie chrome都是等于或者小于的说
就firefox出现大于
[b]问题补充:[/b]
我觉得可能不是获取值的方法出问题了 可能是firefox本身的问题了
现在是两个td的相对比较,
如果三楼同学的 加上offsetParent的boader,这两个都要加上啊,这两个相邻td同一个offsetParent
所以加上后虽然单个绝对位置值变化了,但是两个各之间相对值还是没变地
依然是:
前一个Td的offsetLeft+前一个TD的offsetWidth大于后一个td的offsetLeft
莫名其妙的问题啊
ie chrome都是 等于或者小于的说
就firefox出现 大于
[b]问题补充:[/b]
tO 三楼同学:
这个table是用js动态产生地,可以增删行列以及拆分合并等等。
里面有几个算法要用到offsetLeft以及offsetWidth来判断单元格之间的位置才能决定下一步操作,比如增加一列时候(考虑非常不规则table情况)
我提的情况并不是每次都出现,可能在连续一些操作后(如增加列)若干次后出现。
恩 我尝试把错误结果提交下
[b]问题补充:[/b]
把出现问题的页面提交了
error.html页面
注意用firefox打开,点击单元格即可,里面的js函数为自己加入
[b]问题补充:[/b]
呵呵 多谢三楼同志的解答 至少晓得问题所在了
虽然我要求的效果是 :
border-collapse : collapse
如果是 separate 边框太粗
不过还是散分吧
恭喜发财