javascript - 显示隐藏 在 chrome 和 firefox 中不起作用

Question

谁能帮帮我:

我尝试隐藏和显示包含两个单元格的行。内容在单元格二中。它在 IE 中运行良好，但在 FF 和 Chrome 中似乎所有内容都试图适应第一个单元格的空间。这是我的代码:

<table border="0" cellpadding="0" cellspacing="0" width="700">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td width="50"></td>
    <td width="650">
      <input type="radio" id="r1" name="r1" value="" class="small" onClick="Hide('div_test', this);">
      <label for="r1">Skjul</label>&nbsp;&nbsp;
      <input type="radio" id="r2" name="r1" value="" class="small" onClick="Reveal('div_test', this);">
      <label for="r2">Vis</label>&nbsp;&nbsp;
    </td>
  </tr>
  <tr id="div_test" style="display:none;">
    <td width="50"></td>
    <td width="650">Dette er også en test</td>
  </tr>
</table>

和脚本:

function Reveal (it, box) 
{ 
    var vis = (box.checked) ? "block" : "none"; 
    document.getElementById(it).style.display = vis;
}


function Hide (it, box) 
{ 
    var vis = (box.checked) ? "none" : "none"; 
    document.getElementById(it).style.display = vis;
}

我在这里做错了什么？

Answer 1

您需要将display 设置为table-row not block 因为它是表格行!

http://jsfiddle.net/xsrdeuw4/

function Reveal (it, box) 
{ 
    var vis = (box.checked) ? "table-row" : "none"; 
    document.getElementById(it).style.display = vis;
}