突出显示包含其内容的表格单元格 [英] Highlight a table cell with its content
问题描述
我正在玩桌子（TOM与DOM等）
我无法找出细胞的有效突出机制：
1）没有问题：
< td ... onMouseOver / Out background change>
里面的一些文字
< / td>
2）
< td ... onMouseOver / Out背景更改>
< input type = "复选框"名称= QUOT; cb022" value =" cbv022">
里面的一些文字
< some href inside>
< / td>
在第二种情况下（正如预期的那样）我们在移动单元格时从一个单元格本身获得了一个充满活力的
mouseover / mouseout事件喷泉
和内容元素。所以单元格闪烁，或者链接不是画了但不是单元格，或链接是画的，但单元格不是，并且
等等。 />
什么是或多或少的简单方法：
onmouseover绘制单元格及其所有内容
保持全部涂漆直到你离开牢房
？
Hi, I''m playing around with tables (TOM vs. DOM etc.)
I cannot figure out an effective highlight mechanics for the cells:
1) No problems with:
<td ...onMouseOver/Out background change>
some text inside
</td>
2)
<td ...onMouseOver/Out background change>
<input type="checkbox" name="cb022" value="cbv022">
some text inside
<some href inside>
</td>
In the second case (as expected) we are getting a bubbly fountain of
mouseover/mouseout events while moving over the cell: from the cell itself
and from the content elements. So the cell blinks, or the link is not
painted but not the cell, or the link is painted, but the cell is not, and
so on.
What would be any more or less simple way to:
onmouseover paint the cell and all its content
keep it all painted until you leave the cell
?
推荐答案
VK写道：
[...]
VK wrote:
[...]
在第二种情况下（正如预期的那样）我们在移动单元格时从鼠标悬停/鼠标移动事件中获得了一个充满活力的源泉：来自单元格本身
和内容元素。因此，单元格闪烁，或者链接没有被绘制，但是没有绘制，或链接被绘制，但是单元格不是，等等。
并不像预期的那样。你有没有使用你正在使用的元素的默认内联/块
属性？
什么是或多或少的简单方法：
onmouseover paint细胞及其所有内容
将它们全部涂上，直到你离开牢房
？
In the second case (as expected) we are getting a bubbly fountain of
mouseover/mouseout events while moving over the cell: from the cell itself
and from the content elements. So the cell blinks, or the link is not
painted but not the cell, or the link is painted, but the cell is not, and
so on.
Not really as expected. Have you messed with the default inline/block
attributes of the elements you are using?
What would be any more or less simple way to:
onmouseover paint the cell and all its content
keep it all painted until you leave the cell
?
我觉得你发帖已经萎靡不振因为这真的是一个CSS的东西，和
与JavaScript无关。
我无法在Firefox或IE 6中复制你的问题，我能得到的最接近
是使用以下方法在href上设置不同的背景：hover
{background-color：red}，但我希望看起来很糟糕。
以下是我用来测试你的问题的代码，如果它没有闪烁的话。对于
然后你的问题在其他地方。试试
comp.infosystems。 www.authoring.stylesheets
获得更多帮助
-
Rob
< / script>
< style type =" text / css">
a：hover {background-color：red;}
< / style>
< / head>
< body>
< form action ="">
< input type =" text"名称= QUOT; XX" value =''''>< br>
< input type =" button" value =" click me"
onclick =" testNull（this.form.xx.value）;">
< / form>
< table border =" 1">
< tr>
< td onmouseover =" this.style.backgroundColor =' 'blue'';"
onmouseout =" this.style.backgroundColor =''pink'';">
< p>这是一个测试< / p>
< form action ="">
< label>点击什么都不会发生...& nbsp;
< input type ="复选框"名称= QUOT; cb022" value =" cbv022">
< / label>
a of text
< / form>< br>
a更多文字
< a href =" http：//www.microsoft.com">< br>
链接到Microsoft< br>< / a>
甚至更多文本
< / td>
< td onmouseover =" this.style.backgroundColor =''red'';"
onmouseout =" this.style.backgroundColor =''pink'';">
< p>这是一个测试< / p>
< form action ="">
< label>点击什么都不会发生.. 。& nbsp;
< input type ="复选框"名称= QUOT; cb022" value =" cbv022">
< / label>
a of text
< / form>< br>
a更多文字
< a href =" http://www.apple.com">< br>链接到Apple< br>< / a>
甚至更多文字
< / td>
< / tr>
< / table>
I think you post has languished because this is really a CSS thing, and
nothing to do with JavaScript.
I can''t replicate your issue in Firefox or IE 6, the closest I can get
is to put a different background on the href using a:hover
{background-color: red}, but I would expect that to look awful.
Below is the code I used to test your issue, if it doesn''t "flash" for
you then your issue is elsewhere. Try
comp.infosystems.www.authoring.stylesheets
for more help
--
Rob
</script>
<style type="text/css">
a:hover {background-color: red;}
</style>
</head>
<body>
<form action="">
<input type="text" name="xx" value='' ''><br>
<input type="button" value="click me"
onclick="testNull(this.form.xx.value);">
</form>
<table border="1">
<tr>
<td onmouseover="this.style.backgroundColor = ''blue'';"
onmouseout="this.style.backgroundColor = ''pink'';">
<p>Here is a test</p>
<form action="">
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
</form><br>
a bit more text
<a href="http://www.microsoft.com"><br>
Link to Microsoft<br></a>
and even more text
</td>
<td onmouseover="this.style.backgroundColor = ''red'';"
onmouseout="this.style.backgroundColor = ''pink'';">
<p>Here is a test</p>
<form action="">
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
</form><br>
a bit more text
<a href="http://www.apple.com"><br>Link to Apple<br></a>
and even more text
</td>
</tr>
</table>
我在谈论外部表操作（表本身就是
脚本本身）。
此外，表单元素都是一个封闭形式（如何在现实生活中如何实现，不会影响展示，只需提及代码
更改）。
从你的例子：
（我知道它的MICROSOFT风格，DOM稍后会出现）。
尝试移动正确的单元格。是我的代码还是
浏览器？以及如何修复它？
< html>
< head>
< script>
function test（）{
var c = document.getElementById（''table01''）。tBodies [0] .rows [0] .cells [1];
c.attachEvent（''onmouseover''，突出显示）;
c.attachEvent（''onmouseout''，恢复）;
}
函数高亮显示（）{
event.srcElement.style.backgroundColor =''red'';
}
函数restore（）{
event.srcElement.style.backgroundColor =''white'';
}
< / script>
< / head>
< body onLoad =" test（）">
< table id =" table01" border =" 1">
< form action ="">
< tr>
< td onmouseover =" this.style.backgroundColor =''blue'';"
onmouseout =" this.style.backgroundColor =''pink'';">
< p>这是一个测试< / p>
< label>点击什么都不会发生......& nbsp;
< input type =" checkbox"名称= QUOT; cb022" value =" cbv022">
< / label>
a of text
< br>
a更多文字
< a href =" http：//www.microsoft.com">< br>
链接到Microsoft< br> < / a>
甚至更多文字
< / td>
< td>
< p>这是一个测试< / p>
< label>点击什么都不会发生...& nbsp;
< input type =" ;复选框"名称= QUOT; cb022" value =" cbv022">
< / label>
a of text
< br>
a更多文字
< a href =" http://www.apple.com">< br>链接到Apple< br>< / a>
甚至更多文字
< / td>
< / tr>
< / form>
< / table>
< / body>
< / html>
I''m talking about external table manipulation (table is by itself, the
script by itself).
Also, form elements are all appeirtaning to one enclosing form (how is it in
the real life, doesn''t affect the showcase, just to mention the code
change).
From your example:
(I know it''s MICROSOFT style, DOM is coming a bit later).
Try to move over the right cell. Is it something with my code or with the
browser? And how to fix it?
<html>
<head>
<script>
function test() {
var c = document.getElementById(''table01'').tBodies[0].rows[0].cells[1];
c.attachEvent(''onmouseover'',highlight);
c.attachEvent(''onmouseout'',restore);
}
function highlight() {
event.srcElement.style.backgroundColor=''red'';
}
function restore() {
event.srcElement.style.backgroundColor=''white'';
}
</script>
</head>
<body onLoad="test()">
<table id="table01" border="1">
<form action="">
<tr>
<td onmouseover="this.style.backgroundColor = ''blue'';"
onmouseout="this.style.backgroundColor = ''pink'';">
<p>Here is a test</p>
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
<br>
a bit more text
<a href="http://www.microsoft.com"><br>
Link to Microsoft<br></a>
and even more text
</td>
<td>
<p>Here is a test</p>
<label>Click for nothing to happen...
<input type="checkbox" name="cb022" value="cbv022">
</label>
a bit of text
<br>
a bit more text
<a href="http://www.apple.com"><br>Link to Apple<br></a>
and even more text
</td>
</tr>
</form>
</table>
</body>
</html>
2004年11月24日星期三12:57:19 +0100，VK< sc ********** @ yahoo.com>写道：
[snip]
On Wed, 24 Nov 2004 12:57:19 +0100, VK <sc**********@yahoo.com> wrote:
[snip]
是用我的代码还是用浏览器？
从技术上讲，既没有错误也没有这里。然而，效果
是由于你的代码。
你要么没有意识到，要么已经忘记了，事件是泡沫。 。
事件可能最初是在某个元素上触发的，但是一旦它完成了
，事件就会继续向上移动文档树，然后触发
其他听众。当您在事件的
源上进行颜色更改时，当您将鼠标悬停在单元格上时，最终会更改单元格的颜色，以及颜色当你用
鼠标悬停它们时，它们分开了。
以及如何修复它？
Is it something with my code or with the browser?
Technically neither as there is nothing "wrong" here. However, the effect
is due to your code.
What you either don''t realise, or have forgotten, is that events "bubble".
An event might initially be triggered on a certain element, but once it
has finished there, the event then continues up the document tree, firing
additional listeners as it goes. As you base the colour change on the
source of the event, you end up changing the colour of the cell when you
mouse-over the cell, and the colour of descendents separately when you
mouse-over them.
And how to fix it?
Don'' t改变源元素的颜色，只改变单元格（就像你在第一个单元格中使用内部事件一样使用
）。
纯粹地这样做在脚本中，你将不得不放弃attachEvent，因为它没有b $ b没有正确设置这个操作符。
如果你只是附加每个元素一个事件监听器，
函数高亮显示（）{
this.style.backgroundColor = ...;
}
函数restore（）{
this.style.backgroundColor ='''';
}
elementRef.onmouseover = highlight;
elementRef.onmouseout = restore;
就够了（适当的fe当然可以进行测试。如果有多个听众会有更多的话，你需要一些更高级的东西（比如说这是
的情况）。
[snip]
Mike
-
Michael Winter
替换.invalid与.uk通过电子邮件回复。
Don''t change the colour of the source element, just the cell (as you do
with the intrinsic events in the first cell).
To do that purely in script, you''ll have to abandon attachEvent as it
doesn''t set the this operator correctly.
If you''re only attaching one event listener per element,
function highlight() {
this.style.backgroundColor = ...;
}
function restore() {
this.style.backgroundColor = '''';
}
elementRef.onmouseover = highlight;
elementRef.onmouseout = restore;
will suffice (with proper feature testing, of course). If there will be
multiple listeners, you''ll need something more advanced (say if that''s the
case).
[snip]
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
这篇关于突出显示包含其内容的表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
