0

我需要指导编辑文件。我在下面发布了 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";
}
4

1 回答 1

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)，然后遍历它的孙子节点。这允许您捕获表中的所有单元格，而不仅仅是行。

这是它工作的一个例子。当您点击链接时，您需要点击页面左下方的绿色“运行”按钮以加载脚本。

于 2013-01-31T15:37:28.437 回答