javascript - 无法更改 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 来实现这一点。

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