HTML - 单击时打开表内的表

Question

我有一个包含2列和2行的表

我想让第一列的元素可以点击，当点击它时，它会出现在该行下的另一个表格。

我想添加一个href，但这不起作用：

<font face="Arial, Helvetica, Geneva">
  <table id="tableInfo" data-role=table class="ui-responsive" width="100%">
  <tbody>
    <tr>
    <a href=#info1 >
       <table id="tableInfoNested1" data-role=table class="ui-responsive" width="100%">
       <tbody>
         <tr>Address</tr>
         <tr>City</tr>
       </tbody>
       </table>
       Name
     </a>
     </tr>
     <tr>
       <a href=#info2 >
       <table id="tableInfoNested2" data-role=table class="ui-responsive" width="100%">
       <tbody>
         <tr>Test</tr>
         <tr>Test</tr>
       </tbody>
       </table>
       Code
     </a>
     </tr>
     </tbody>
   </table>
 </font>

Answer 1

试试这个......

<a id="LogicLink" onclick="Table1();" href="#">Name</a>
<table id="TableNested1"  style="display:none">
<tr><td>Adresss<td/><tr/>
    <tr><td>City<td/><tr/>
<table/>

 <br/>       
<a id="Link" onclick="Table2();" href="#">Code</a>
<table id="TableNested2" style="display:none">
<tr><td>Test<td/><tr/>
    <tr><td>Test<td/><tr/>
</table>     

 function Table1()
{
     var elem=document.getElementById("TableNested1");
     var hide = elem.style.display =="none";
     if (hide) {
         elem.style.display="table";
    } 
    else {
       elem.style.display="none";
    }
  }

    function Table2()
   {
     var elem=document.getElementById("TableNested2");
     var hide = elem.style.display =="none";
     if (hide) {
         elem.style.display="table";
    } 
    else {
       elem.style.display="none";
    }
}

http://jsfiddle.net/Wfxpu/180/