Using Jquery to toggle nested table -

In a .NET MVC project, a table with a search header and generates the number of unknown rows, these closely Each of the rows will hide nested table, with the header and the number of unknown rows. I want to expand nested tables to click on this row.

So far, I have received this:

  & lt; Script & gt; $ ('Div.ordergrid table.orders tbody tr.row td'). Click (function () {$ (this) .Parent () .Parent (.) Children ('tr.rowdetail') Toggle ();}) & lt; / Script & gt; & Lt; Div id = "ordergrid" & gt; & Lt; Table id = "command" & gt; & Lt; Thead & gt; & Lt; Th & gt; Foo & lt; / Th & gt; & Lt; Th & gt; Foo & lt; / Th & gt; & Lt; Th & gt; Foo & lt; / Th & gt; & Lt; Th & gt; Foo & lt; / Th & gt; & Lt; Th colspan = "3" & gt; Foo & lt; / Th & gt; & Lt; Th & gt; Foo & lt; / Th & gt; & Lt; / Thead & gt; @forcha (various models in the model) {& lt; Tbody & gt; & Lt; Tr square = "row" & gt; & Lt; TD & gt; Bar & lt; / TD & gt; & Lt; TD & gt; Bar & lt; / TD & gt; & Lt; TD & gt; Bar & lt; / TD & gt; & Lt; TD & gt; Bar & lt; / TD & gt; & Lt; Td colspan = "3" & gt; Bar & lt; / Td> & Lt; TD & gt; Bar & lt; / TD & gt; & Lt; / TR & gt; & Lt; Tr class = "rowdetail" & gt; & Lt; Td colspan = "8" & gt; & Lt; Table & gt; & Lt; Thead & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; Th & gt; Hail & lt; / Th & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; TD & gt; 1 & lt; / TD & gt; & Lt; TD & gt; 2 & lt; / TD & gt; & Lt; TD & gt; 3 & lt; / TD & gt; & Lt; TD & gt; 4 & lt; / TD & gt; & Lt; TD & gt; 5 & ​​lt; / TD & gt; & Lt; TD & gt; 6 & lt; / TD & gt; & Lt; TD & gt; 7 & lt; / TD & gt; & Lt; TD & gt; 8 & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; } & Lt; / Table & gt; & Lt; / Div & gt;  

(Nosted TB will be forwarded to another later.)

Currently, nothing happens when clicked click the event "Control" in the desired control " guess not.

Oh, and . Parent (). Parent () thing looks silly, but I .parents () .

An uncertain HTML has been given about the selection, you can do it

  $ ('line'). Click (function () {$ (this) .next ('tr'). Toggle ();}); When a row is clicked with  class = "row" , then it gets the next row (which is hidden when your structure is correct ) And toggle your visibility. 
 
 Or you can use slightly more specific selectors, 
 
  $ ('tr.row'). Click (function () {$ (this) .next ('tr.rowdetail'). Toggle ();});  
 
 which can get the next element with the  rowdetail  class and toggle its visibility. In the given framework, both will do the same thing, but your selectors Typically, there are less unpredictable results when being specific with. How unique you are in this example, it actually looks like the rest of your page.