javascript - Wrap table rows without breaking HTML validation? -


i have table , want wrap table rows , problem don't know with what wrap those guys up... if use <div>,<span>,<tr>,<td>...they break validation.

so can wrap table-rows without breaking validation?

this how want problem html not valid.
fiddle here

i generating wrappers using following jquery

$(document).ready(function(){ $('tr:first').nextuntil('.section2').andself().addclass('section1'); $('tr:nth-child(3)').removeclass('section1').addclass('section2'); $('.section2').nextuntil('.section3').removeclass('section1').addclass('section2');  //lets wrap 2 sections inside divs ... //this break validation:(     $('tr.section1').wrapall('<div class="section_box1"></div>'); $('tr.section2').wrapall('<div class="section_box2"></div>'); }); 

as @kevinb writes in comment, tbody element way grop table rows in wrapper element. in static markup, be:

<table class="form-table">  <tbody class="bg"> <tr valign="top"> <th scope="row">hide menu background:</th> <td> <input type="checkbox" value="value1" name="name1"/> </td> </tr> <tr valign="top"> <th scope="row"> menu background: </th> <td> <input type="file" name=""/> </td> </tr> </tbody>      <tbody class="other"> <tr  valign="top"> <th  scope="row">hide sidebar:</th> <td> <input type="checkbox" value="value2" name="name2"/> </td> </tr> <tr valign="top"> <th scope="row">hide site title:</th> <td> <input type="checkbox" value="value3" name="name3" /> </td> </tr> </tbody>  </table> 

the class attributes on tbody elements not needed, can used make styling little easier.

alternatively, might decided 2 parts not logically parts of same table, , use 2 separate table elements. way if want column 2 start @ different positions.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -