javascript - How to get 8 columns in my second tr? -
this html code: http://jsfiddle.net/udxyb/417/
in above code having 4 columns in first tr (eg:section1,section2,section3,section4).but in next tr of table want 8 columns same width of first tr (eg: item 111, item 112,item 113,item 114,item 115,item 116,item 117,item 118).
<table id="main_table"> <thead> <tr class="firstline"> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> </tr> </thead> <tbody> <tr style="width:1002px; background-color:green; color:white"> <td colspan="" class="flip"> section 1 </td> <td colspan="" class="flip"> section 2 </td> <td colspan="" class="flip"> section 3 </td> <td colspan="" class="flip"> section 4 </td> </tr> </tbody> <tbody class="section"> <tr> <td>item 111</td> <td>item 112</td> <td>item 113</td> <td>item 114</td> <td>item 115</td> <td>item 116</td> <td>item 117</td> <td>item 118</td> </tr> <tr> <td>item 121</td> <td>item 122</td> <td>item 123</td> <td>item 124</td> </tr> <tr> <td>item 131</td> <td>item 132</td> <td>item 133</td> <td>item 134</td> </tr> </tbody> <tbody> <tr style="background-color:green; color:white"> <td colspan="" class="flip"> section 1 </td> <td colspan="" class="flip"> section 2 </td> <td colspan="" class="flip"> section 3 </td> <td colspan="" class="flip"> section 4 </td> </tr> </tbody> <tbody class="section"> <tr> <td>item 211</td> <td>item 212</td> <td>item 213</td> <td>item 214</td> </tr> <tr> <td>item 221</td> <td>item 222</td> <td>item 223</td> <td>item 224</td> </tr> <tr> <td>item 231</td> <td>item 232</td> <td>item 233</td> <td>item 234</td> </tr> </tbody> <tbody> <tr style="background-color:green; color:white"> <td colspan="" class="flip"> section 1 </td> <td colspan="" class="flip"> section 2 </td> <td colspan="" class="flip"> section 3 </td> <td colspan="" class="flip"> section 4 </td> </tr> </tbody> <tbody class="section"> <tr> <td>item 311</td> <td>item 312</td> <td>item 313</td> <td>item 314</td> </tr> <tr> <td>item 321</td> <td>item 322</td> <td>item 323</td> <td>item 324</td> </tr> <tr> <td>item 331</td> <td>item 332</td> <td>item 333</td> <td>item 334</td> </tr> </tbody> </table>
this jquery code:
jquery(function($) { $("#polls").on("click", ".flip", function() { $(this) .closest('tbody') .next('.section') .toggle('fast'); }); });
set colspan="2"
on cells in rows have 4 cells.
Comments
Post a Comment