当另一个TD级选中时,TD级保持活跃状态

时间:2013-01-31 12:58:39

标签: class javascript-events html-table

请帮忙。我在java上很糟糕,我需要指导编辑文件。我在下面发布了javascript。这是我的工作示例http://www.closetos.com/top-shelf-awards_copy_copy的链接。

当我向表中添加其他行时出现问题。现在,当您在第二行的单元格中选择文本链接时,它会在单击顶行中的某些内容时保持选定状态并处于活动状态。

function $(id)
{
return document.getElementById(id);
}

function Coalesce(Value, Default)
{
if(Value == null)
return Default;

return Value;
}

function Switcher(numberOfSections, sectionContainerID, activeClass, inactiveClass)
{
this.NumberOfSections   = Coalesce(numberOfSections, 1) - 1;
this.SectionContainerID = Coalesce(sectionContainerID, "sectionContainer");
this.ActiveClass        = Coalesce(activeClass, "active");
this.InactiveClass      = Coalesce(inactiveClass, "");
}

Switcher.prototype.Switch = function(TheLink, SectionID)
{
// Make sure all sections are hidden
var SectionContainer = $(this.SectionContainerID);
for(var ct = 0; ct < SectionContainer.childNodes.length; ct++)
{
var node = SectionContainer.childNodes[ct];
if(node.nodeType != 1)
    continue;

node.style.display = "none";
}

var First = true;
// Reset button styles
for(var ct = 0; ct < TheLink.parentNode.childNodes.length; ct++)
{
if(TheLink.parentNode.childNodes[ct].nodeType != 1)
    continue;
else node = TheLink.parentNode.childNodes[ct];

node.className = this.InactiveClass;

if(First)
{
    node.className += " firstCell";
    First = false;
}
}

// Show the selected section
$(SectionID).style.display  = "block";

TheLink.className = this.ActiveClass;
if(TheLink == node)
TheLink.className += " lastCell";
}

1 个答案:

答案 0 :(得分:0)

您的问题出现在此部分代码中。这仅查看单击的单元格所在的行。TheLink.parentNode是对单元格所在行的引用。

for(var ct = 0; ct < TheLink.parentNode.childNodes.length; ct++) <--- parenNode == row
{
    if(TheLink.parentNode.childNodes[ct].nodeType != 1)
    {
         continue;
    }
    else 
    {
        node = TheLink.parentNode.childNodes[ct];
    }

    node.className = this.InactiveClass;

    if(First)
    {
        node.className += " firstCell";
        First = false;
    }
}

为了使这个工作有多行,您需要修改它以查看表中的其他行:

for(var ct = 0; ct < TheLink.parentNode.parentNode.childNodes.length; ct++) 
    {   

        for( innerL = 0; innerL < TheLink.parentNode.parentNode.childNodes[ct].childNodes.length; innerL++)
        { 
            if(TheLink.parentNode.parentNode.childNodes[ct].childNodes[innerL].nodeType != 1)
            {
                 continue;
            }
            else 
            {
                node = TheLink.parentNode.parentNode.childNodes[ct].childNodes[innerL];
            }

            node.className = this.InactiveClass;

            if(First)
            {
                node.className += " firstCell";
                First = false;
            }
        }
    }

在上面的块中,您正在查看parentNode(tr)的parentNode(tbody),然后迭代其孙子。这允许您捕获表中的所有单元格,而不仅仅是行。

Here is an example of it working.当你点击链接时,你需要点击页面左下角的绿色“运行”按钮来加载脚本。