Note that there are some explanatory texts on larger screens.

plurals
  1. POhtml nested table hide or show table last td by clicking table row first td
    primarykey
    data
    text
    <p>I want to display data in nested table structure (please check following link)</p> <p>See my code below. It was implemented in grid view in asp.net, but I am trying to implementing in html. </p> <p>The problem is: </p> <ul> <li>if I am clicking in the first table cell (td) the last td should be shown.</li> <li>currently it does not display the last td </li> <li>initially last td should be hidden.</li> </ul> <p>Please help me.</p> <p></p> <pre><code>&lt;head&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(function() { $(".toptable &gt; tbody &gt; tr &gt; td:not(.n1)").hide(); $(".toptable tr").find('td:first').click(function() { $(this).find('td:last').show(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table class="toptable" border="1"&gt; &lt;tbody&gt; &lt;tr class="accordion"&gt; &lt;td class="id1 n1"&gt;TD1&lt;/td&gt; &lt;td class="id1 n1"&gt;TD2&lt;/td&gt; &lt;td class="id1 n1"&gt;TD3&lt;/td&gt; &lt;td class="nested"&gt; &lt;tr&gt; &lt;td colspan="3"&gt; &lt;table border="1"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;nestedTD1&lt;/td&gt; &lt;td&gt;nestedTD2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;nestedTD3&lt;/td&gt; &lt;td&gt;nestedTD4&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="accordion"&gt; &lt;td class="id1 n1"&gt;TD1&lt;/td&gt; &lt;td class="id1 n1"&gt;TD2&lt;/td&gt; &lt;td class="id1 n1"&gt;TD3&lt;/td&gt; &lt;td class="nested"&gt; &lt;tr&gt; &lt;td colspan="3"&gt; &lt;table border="1"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;nestedTD1&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;nestedTD3&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; </code></pre> <p></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload