Question

I need guidance editing a file. I have posted the Javascript below. This is a link to my working example http://www.closetos.com/top-shelf-awards_copy_copy.

The problem occurred when I added an additional row to the table. Now, when you select the text link in a cell in the second row, it stays selected and active, when clicking on something in the top row.

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";
}

Answer 1

You problem is in this section of code. this looks only at the row that the clicked cell is in. TheLink.parentNode is a reference to the row that the cell is in.

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;
    }
}

In order to make this work with multiple rows you need to modify it to look at other rows in the table:

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;
            }
        }
    }

in the block above you are looking at the parentNode’s (the tr) parentNode (tbody) and then iterating through its grandchildren. This allows you to capture all the cells in the table, not just the row.

Here is an example of it working. When you follow the link you need to hit the green ‘run’ button on the bottom left of the page to get the script to load.