HTML - Открыть таблицу внутри таблицы, когда нажмите

У меня есть таблица с 2-мя колонками и 2 рядами, как это HTML - Открыть таблицу внутри таблицы, когда нажмите

Я хотел бы, чтобы элементы первого Clickable столбца и когда один нажимает на нее, в этой строке появляется другая таблица.

Я думал о добавлении 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>

источник

2015-08-24 ayasha

Попробуйте это ...

<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/

источник

2015-08-24 10:56:33

Спасибо большое !!! – ayasha

приветствуется ......... –

-1

взглянуть на это:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
     </head> 
     <body> 

     <div data-role="page" id="pageone"> 
     <div data-role="header"> 
     <h1>Collapsible Lists</h1> 
     </div> 

     <div data-role="main" class="ui-content"> 
     <h2>My Phonebook</h2> 
     <div data-role="collapsible"> 
      <h4>A</h4> 
      <ul data-role="listview"> 
      <li><a href="#">Adele</a></li> 
      <li><a href="#">Agnes</a></li> 
      </ul> 
     </div> 

     <div data-role="collapsible"> 
      <h4>B</h4> 
      <ul data-role="listview"> 
      <li><a href="#">Billy</a></li> 
      <li><a href="#">Bob</a></li> 
      </ul> 
     </div> 

     <div data-role="collapsible"> 
     <h4>C</h4> 
     <ul data-role="listview"> 
      <li><a href="#">Calvin</a></li> 
      <li><a href="#">Cameron</a></li> 
      <li><a href="#">Chloe</a></li> 
      <li><a href="#">Christina</a></li> 
     </ul> 
     </div> 
     </div> 

     <div data-role="footer"> 
     <h1>Insert Footer Text Here</h1> 
     </div> 
     </div> 

     </body> 
    </html>

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible ИЛИ http://jasalguero.com/ledld/development/web/expandable-list/

Вам придется применить тот же принцип к вашему столу

источник

2015-08-24 10:13:04 Dave

HTML - Открыть таблицу внутри таблицы, когда нажмите

ответ

Смежные вопросы