javascript - 在不破坏 HTML 验证的情况下换行表行？

Question

我有一张 table ，我想包装 table rows ，但问题是我不知道用什么来包装那些人......如果我用 <div> , <span> , <tr> , <td> ...他们都打破了我的验证。

那么我可以用什么来包装我的表格行而不破坏验证？

这就是我希望它看起来的样子，唯一的问题是我的 HTML 无效。
Fiddle Here

我正在使用以下 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 those two sections inside divs ...
//This will obviously break my validation:(    
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
});

Answer 1

正如@KevinB 在评论中所写，tbody 元素实际上是在包装元素中对表行进行分组的唯一方法。在静态标记中，这可能是:

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

tbody 元素上的 class 属性实际上不是必需的，但它们可用于使样式更容易一些。

或者，您可能会认为这两个部分在逻辑上不是同一个表的真正部分，并使用两个单独的 table 元素。如果您希望第 2 列从不同的位置开始，这确实是唯一的方法。