Сделать одну строку таблицы исчезающей при нажатии другой

Question

Я действительно хочу сделать пару вещей, и я не могу найти ничего похожего, это javascript, а не jQuery.
Updated fiddle with working code. Благодаря LuudJacobs.
Я знаю, это глупо .. Это просто для практики, я новичок в этом. Он также не закончен.
Итак, что я хочу сделать:
- Если строка «Примо Виктория» открыта, закройте ее, когда «Attero Dominatus» или любая другая строка нажата/открыта. Но в тексте «Показать» должно быть разрешено иметь столько экземпляров, сколько захочет.
- Текст «Show Lyrics» превращается в «Hide Lyrics» при нажатии.
Я на самом деле почти получил это одно, но вместо того, чтобы изменить текст, я сделал новую ссылку ...

document.getElementsByClassName("lyrics")[0].onclick = function() { 
    var x = document.getElementsByClassName("showLyrics")[0]; 
    var y = document.getElementsByClassName("lyrics")[0]; 
    if (x.style.display === "none" || x.style.display === "") { 
     x.style.display = "table-row"; 
     y.innerHTML = '<a href="#" class="lyrics">Hide Lyrics</a>'; 
    } 
    else { 
     x.style.display = "none"; 
     y.innerHTML = '<a href="#" class="lyrics">Show Lyrics</a>' 
    } 

Спасибо за помощь.

Answer 1

Вместо того, чтобы изменять стиль строки таблицы напрямую, лучше использовать классы и вместо этого переключать их. Таким образом, легче ориентировать «расширенные» строки таблицы. Ваш код может выглядеть примерно так:

/* CSS */ 
.showLyrics{ 
    display: none; /* hide table row by default */ 
} 
.showLyrics.visible{ 
    display: table-row; /* show the table row */ 
} 

Теперь вы можете использовать Javascript для переключения между классами:

//Javascript 
document.getElementsByClassName("lyrics")[0].onclick = function(){ 
    var x = document.getElementsByClassName("showLyrics")[0]; 

    //check if the row already has a .visible class 
    if(x.classList.contains('visible')){ 

    //hide the row if it's already visible 
    x.classList.remove('visible'); 

    /* other stuff you want to do on hiding a table row */ 

    }else{ 

    //hide all rows which are visible (have class .visible) 
    var visibleRows = document.querySelectorAll('.visible'), 
     i, l = visibleRows.length; 

    for(i = 0; i < l; ++i){ 
     visibleRows[i].classList.remove('visible'); 
    } 

    //show the row 
    x.classList.add('visible'); 

    /* other stuff you want to do on showing a table row */ 

    } 
} 

В качестве альтернативы вы можете использовать x.classList.toggle('visible'); Читайте на .classList на MDN.

В качестве опоры: когда я заглянул в вашу скрипку, я посмотрел на это: <tr class="tableEntry1, hover">. Я почти уверен, что вы имели в виду <tr class="tableEntry1 hover">. Примечание: нет запятой. Классы должны быть разделены пробелом, а не запятой.