使用DOM来改变样式而不是ID ... [英] Using DOM to change styles instead of IDs...
问题描述
你好，
我有一个类似于XP Windows资源管理器的导航树行为。它
使用样式在鼠标悬停时为一行加下划线，并在单击时更改
行的外观。
目前，它使用CSS / Javascript工作正常，通过调用
函数，通过传入ID强调下划线和突出显示。
问题是，我不想传入ID。目前它有一个
TD需要更改，但我可能需要为图像添加一个（将
外观更改为减号）以及许多其他内容。相反，我想要一种传递行索引的方式，并让它遍历DOM。要改变行为，选择正确的子节点来改变
的外观。可以这样做吗？
这是一个内联网应用程序，只需要使用IE 6（及更高版本）。
谢谢！
Ann
这是当前工作的javascript ：
var old_clicked_tree_nav = -1 //最初没有行
突出显示...
函数hover_tree_nav（row_id，bool）
{
if（document.getElementById（''td_''+ row_id）.className！=
''nav_selected''）
{
if（bool == 1）
document.getElementById（''td_''+ row_id）.className =''nav_highlighted''
else
document.getElementById（''td_''+ row_id）.className =''nav_normal''
}
}
函数click_tree_nav（row_id，do_action）
{
//关闭旧的亮点
if（old_clicked_tree_nav> ; -1）
document.getElementById（''td_''+
old_clicked _tree_nav）.className =''nav_normal''
old_clicked_tree_nav = row_id
//制作新的亮点
document.getElementById（ ''td_''+ row_id）.className =''nav_selected''
}
这里有一个树的剪辑：
< tbody>
< tr id =" tr_0">< td onclick =" click_tree_nav（0,0）">< span
id =" span_0">< table class =" tree_nav_interior">< tr>< td>< img
src =" ; ../图像/ tree_minus.gif" align =" absmiddle">< / td>< td id =" td_0"
class =" nav_normal" onmouseover =" hover_tree_nav（0,1）"
onmouseout =" hover_tree_nav（0,0）">< img
src ="。 ./images/tree_folder_open.gif" align =" absmiddle">拥有
特惠< / td>< / tr>< / table>< / span>< / td>< / tr>
<！ - daddy - >< tr id =" tr_1">< td onclick =" click_tree_nav（1,0）">< span
id =" span_1">< table class =" tree_nav_interior">< tr>< td>< img
src =" ../ images /tree_spacer.gif"><img src =" ../ images / tree_minus.gif"
align =" absmiddle">< / td>< td id =" ; td_1" class =" nav_normal"
onmouseover =" hover_tree_nav（1,1）" onmouseout =" hover_tree_nav（1,0）">< img
src =" ../ images / tree_folder_open.gif" align =" absmiddle">交易
A< / td>< / tr>< / table>< / span>< / td>< / tr>
Hi there,
I have a nav tree similar to the XP Windows Explorer in behavior. It
uses styles to underline a row on mouseover, and change the look of a
row when clicked.
Currently, it is working fine using CSS/Javascript, by calling
functions that underline and highlight by passing in IDs.
The problem is, I do not want to pass in IDs. Currently it has one the
TDs to be changed, but I may need to add one for images (to change the
look of a plus to minus) and many other things. Instead I would like a
way of passing the row index, and having it "walk through the DOM" to
change behavior, picking the correct child nodes to change the
appearance. Can this be done?
It is for an intranet app and only needs to work with IE 6 (and later).
Thanks!
Ann
Here is the current working javascript:
var old_clicked_tree_nav = -1 // initially there is no row
highlighted...
function hover_tree_nav(row_id,bool)
{
if(document.getElementById(''td_'' + row_id).className !=
''nav_selected'')
{
if(bool==1)
document.getElementById(''td_'' + row_id).className=''nav_highlighted''
else
document.getElementById(''td_'' + row_id).className=''nav_normal''
}
}
function click_tree_nav(row_id, do_action)
{
// turn off old highlight
if(old_clicked_tree_nav > -1)
document.getElementById(''td_'' +
old_clicked_tree_nav).className=''nav_normal''
old_clicked_tree_nav = row_id
// make new highlight
document.getElementById(''td_'' + row_id).className=''nav_selected''
}
And here is one snip of the tree:
<tbody>
<tr id="tr_0"><td onclick="click_tree_nav(0, 0)"><span
id="span_0"><table class="tree_nav_interior"><tr><td><img
src="../images/tree_minus.gif" align="absmiddle"></td><td id="td_0"
class="nav_normal" onmouseover="hover_tree_nav(0,1)"
onmouseout="hover_tree_nav(0,0)"><img
src="../images/tree_folder_open.gif" align="absmiddle">Owned
Deals</td></tr></table></span></td></tr>
<!-- daddy --><tr id="tr_1"><td onclick="click_tree_nav(1, 0)"><span
id="span_1"><table class="tree_nav_interior"><tr><td><img
src="../images/tree_spacer.gif"><img src="../images/tree_minus.gif"
align="absmiddle"></td><td id="td_1" class="nav_normal"
onmouseover="hover_tree_nav(1,1)" onmouseout="hover_tree_nav(1,0)"><img
src="../images/tree_folder_open.gif" align="absmiddle">Deal
A</td></tr></table></span></td></tr>
推荐答案
Giggle Girl写道：
Giggle Girl wrote:
问题是，我不想传入ID。目前它有一个要更改的TD，但我可能需要为图像添加一个（将一个加号的外观改为减号）和许多其他东西。相反，我想要一种传递行索引的方法，并让它遍历DOM。改变行为，选择正确的子节点来改变外观。可以这样做吗？
< tr id =" tr_0">< td onclick =" click_tree_nav（0,0）">
The problem is, I do not want to pass in IDs. Currently it has one the
TDs to be changed, but I may need to add one for images (to change the
look of a plus to minus) and many other things. Instead I would like a
way of passing the row index, and having it "walk through the DOM" to
change behavior, picking the correct child nodes to change the
appearance. Can this be done? <tr id="tr_0"><td onclick="click_tree_nav(0, 0)">
你可以传递元素onclick处理程序附加到例如
< td onclick =" click_tree_nav（this）;">
然后你的函数
函数click_tree_nav（元素）{
可以走DOM树例如
element.parentNode
或
element.nextSibling
或
element.previousSibling
-
Martin Honnen
http://JavaScript.FAQTs.com/
这是一个树的真实例子的链接：
http://c.1asphost.com/giggy/tree01a/main/default.htm
注意，打开/关闭的脚本还没有工作，只有样式
ch安格斯" （下划线和突出显示）...
如果有人可以使用
DOM向我展示更改课程的实际代码，我将不胜感激。 （感谢Martin，我正在努力开发你的
建议，但我从未编写过类似这样的内容。）
另外，仅供参考，我认为这对我来说是必要的由于我想要的视觉行为的类型，在每个表行中有一个表
。我不确定在表中是否有一个
表使得操作DOM更加困难...
Ann
Here is a link to a real example of the tree:
http://c.1asphost.com/giggy/tree01a/main/default.htm
Note, the script to open/close is not working yet, only the "style
changes" (underline and highlight)...
If someone could show me the actual code to change classes using the
DOM I would appreciate. (Thanks Martin, I am trying to develop your
suggestion but I have never coded something like this.)
Also, FYI, it _is_ necessary for me to have a table in each table row
due to the type of visual behavior I want. I am not sure if having a
table in a table makes manipulating the DOM more difficult...
Ann
我想要更改内部TD的类，其中id =" td = 1"
。我如何使用DOM来定位它，如果我首先传入
包含TD的表格的TD元素我是b $ b目标，如
< td onclick =" click_tree_nav（this）;">
这一行？
<！ - daddy - >< tr id =" tr_1">< td onclick =" click_tree_nav（1,0）">< span
id =" span_1">< table class =" tree_nav_interior">< tr>< td>< img
src =" ../ images /tree_spacer.gif"><img src =" ../ images / tree_minus.gif"
align =" absmiddle">< / td>< td id =" ; td_1" class =" nav_normal"
onmouseover =" hover_tree_nav（1,1）" onmouseout =" hover_tree_nav（1,0）">< img
src =" ../ images / tree_folder_open.gif" align =" absmiddle">交易
A< / td>< / tr>< / table>< / span>< / td>< / tr>
是的，正如我在上一条消息中所说，我需要在那里保留
table-in-table和span标签。实际上，这个代码与实际必须使用的完全相同，除了（希望，希望）ID
（我想要删除）。
函数" click_tree_nav（element）"看起来像？
谢谢，
Ann
Say I want to change the class of the interior TD with the id="td=1"
below. How could I use the DOM to target it, if I start by passing in
the element of the the TD containing the table with the TD I am
targetting, like
<td onclick="click_tree_nav(this);">
For this row?
<!-- daddy --><tr id="tr_1"><td onclick="click_tree_nav(1, 0)"><span
id="span_1"><table class="tree_nav_interior"><tr><td><img
src="../images/tree_spacer.gif"><img src="../images/tree_minus.gif"
align="absmiddle"></td><td id="td_1" class="nav_normal"
onmouseover="hover_tree_nav(1,1)" onmouseout="hover_tree_nav(1,0)"><img
src="../images/tree_folder_open.gif" align="absmiddle">Deal
A</td></tr></table></span></td></tr>
And yes, as I said in my last message, I need to keep the
table-in-table and span tags there. In fact, this code is exactly as
it actually must be used, with the exception (hope, hope) of the IDs
(which I _do_ want to remove).
What would the function "click_tree_nav(element)" look like?
Thanks,
Ann
这篇关于使用DOM来改变样式而不是ID ...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
