HTML要素の可視性を変更できません

Question

要素の行の可視性を変更しようとしています。 ユーザーがボタンを選択した場合にのみ要素を表示するはずです。

HTMLコード：

<tr style="display:none"> 
     <td><input type="submit" value ="Home" onclick="" id="home"/></td> 
     <td><input name="home_phone" id="home_phone" type="text" value="Phone" ></td> 
    </tr> 

JSコード：

document.getElementById("home").style.display = ''; 
document.getElementById("home_phone").style.display = ''; 

私はHTMLとJSを使用して、これをachiveしようとしています。

Answer 1

JavaScriptコードは正しいですか？

問題は、非表示要素内にネストされた要素の表示値を設定することです。 <tr>のスタイルは隠し要素なので変更する必要があります。

HTMLコード：

<a href="javascript:toggleRow('home_row');">toggle home row visibility</a> 

<table> 
    <tr id="home_row"> 
     <td><input type="submit" value ="Home" onclick="" id="home"/></td> 
     <td><input name="home_phone" id="home_phone" type="text" value="Phone" ></td> 
    </tr> 
</table> 

JSコード：

function toggleRow(rowId){ 
    var rowElement = document.getElementById(rowId); 
    rowElement.style.display = rowElement.style.display.toLowerCase() == 'hidden' 
           ? 'table-row' 
           : 'hidden'; 
}