0

ファイルを編集するためのガイダンスが必要です。以下にJavascriptを投稿しました。これは私の作業例http://www.closetos.com/top-shelf-awards_copy_copyへのリンクです。

テーブルに行を追加したときに問題が発生しました。これで、2行目のセルでテキストリンクを選択すると、一番上の行の何かをクリックしたときに、選択されたままアクティブになります。

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 に答える