怎么实现通过选择radiobutton显示与隐藏相应内容

Question

1.不占位符.<table width="31%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="63%">
      <input type="radio" name="radiobutton" value="0" onclick="ShowTr()">
      第一行
      <input type="radio" name="radiobutton" value="1" onclick="ShowTr()">
      第二行
      <input type="radio" name="radiobutton" value="2" onclick="ShowTr()">
      第三行</td>
    </tr>
  <tr id="tr1" style="display:none">
    <td>这是第一行</td>
    </tr>
  <tr id="tr1" style="display:none">
    <td>这是第二行</td>
    </tr>
  <tr id="tr1" style="display:none">
    <td><p>这是第三行</p>      </td>
    </tr>
</table>
<script>
function ShowTr()
{
    r = document.all.radiobutton;
    for(var i=0;i<r.length;i++)
    {
        if(r[i].checked)
        {
            tr1[i].style.display="block";
            continue;
        }
        tr1[i].style.display="none";
    }
}
</script>

Answer 1

2. 占位.<table width="31%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="63%">
      <input type="radio" name="radiobutton" value="0" onclick="ShowTr()">
      第一行
      <input type="radio" name="radiobutton" value="1" onclick="ShowTr()">
      第二行
      <input type="radio" name="radiobutton" value="2" onclick="ShowTr()">
      第三行</td>
    </tr>
  <tr id="tr1" style="visibility:hidden">
    <td>这是第一行</td>
    </tr>
  <tr id="tr1" style="visibility:hidden">
    <td>这是第二行</td>
    </tr>
  <tr id="tr1" style="visibility:hidden">
    <td><p>这是第三行</p>      </td>
    </tr>
</table>
<script>
function ShowTr()
{
    r = document.all.radiobutton;
    for(var i=0;i<r.length;i++)
    {
        if(r[i].checked)
        {
            tr1[i].style.visibility="visible";
            continue;
        }
        tr1[i].style.visibility="hidden";
    }
}
</script>