Question

我有一张桌子，我想要包装表格行，但问题是我不知道用什么来包装那些家伙......如果我使用<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元素实际上是在包装元素中grop表行的唯一方法。在静态标记中，这可能是：

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

class元素上的tbody属性确实不需要，但它们可以用来使样式更容易。

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

Answer 2

我首先要从删除表开始。在显示实际的“表格数据”时，最好只使用表格。

<h3 class="title">General Settings:</h3>
<div class="section_box1">
    Hide Menu Background: <input type="checkbox" value="value1" name="name1"/><br />
    Menu Background: <input type="file" name=""/>
</div>
<div class="section_box2">
    Hide Sidebar: <input type="checkbox" value="value2" name="name2"/><br />
    Hide Site Title: <input type="checkbox" value="value3" name="name3" />
</div>

请参阅jsfiddle。

通过这种方式，您可以根据需要更自由地添加类/包装器，并且仍然符合HTML标准。

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

2 个答案: