Javascript display = 'block'

Question

何かがクリックされたときにテーブルの行を示すコードがあります。

HTML

<tr id='Asset' class='rrtr' style='display:none;'> 

ユーザーがクリックすると、正常に動作しますJavascriptを、発射：：だから、行はそれのスタイルが無効に属性を持っている、以下を参照してください

Javascriptを

document.getElementById("Asset").style.display = 'block'; 

を

しかし、行のスタイルは、それがクラス属性は残りのように 'rrtr'に設定されます。

「表示：なし」をオフにすると、行に表示され、それを実行すると、フォーマットは正常です。

アイデア？

Answer 1

に設定し、

document.getElementById("Asset").style.display = ''; 

Internet Explorer 7および下displayの値としてtable-rowをサポートしていませんが設定します。 Alternatively-と、間違いなく、良いアイデアはにある - JSを使用して変更/行のクラスを設定し、削除します。

<tr id='Asset' class='rrtr rrtr-hidden'> 
<!-- .rrtr-hidden { display: none; } --> 

// Remove class `.rrtr-hidden` 
document.getElementById("Asset").className = 'rrtr'; 

Answer 2

blockの代わりに、表示値をtable-rowに設定する必要があります。

Answer 3

が最高の互換性のためtable-rowまたは""

Answer 4

私はクラスを削除/追加することによって、非表示と表示のテーブル行名前は 'hide'と呼ばれます。このアプローチには、通常の表示スタイルが何であるかを知らないで気にせずに要素を表示/非表示できるという利点があります。テーブルの行は、おそらく問題ではありませんが、他の要素では、たとえばblockからinlineに変更することがあります。要素を隠すためにクラスを使用する場合は、JavaScriptを変更する必要はありません。 JSがSOに他の誰かから来たが、残念ながら私は、リンクを保存し忘れたこと

.hide { 
    display:none; 
} 

とJavaScriptで、

function hasClass(ele, cls) { 
    if(ele != null && ele.className != null) { 
     return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 
    } else { 
     return false; 
    } 
} 

function addClass(ele, cls) { 
    if (! hasClass(ele, cls)) { 
     ele.className += " " + cls; 
    } 
} 

function removeClass(ele, cls) { 
    if (hasClass(ele, cls)) { 
     var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
     ele.className = ele.className.replace(reg, ''); 
    } 
} 

：あなたのCSSで

。

したがって、要素addClass(document.getElementById('Asset'), 'hide')とremoveClassを非表示にすると表示されます。

EDIT：何とかアンディの答えを忘れました。しかし、基本的には同じことですが、これらのaddClass &のremoveClassメソッドは、element.classNameを「手動で」変更するよりももう少し堅牢です。