5

我有一张桌子，我想包装表格行，但问题是我不知道用什么来包装那些家伙......如果我使用<div>, <span>, <tr>, <td>...它们都会破坏我的验证。

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

这就是我希望它看起来的唯一问题是我的 HTML 无效。
在这里提琴

我正在使用以下 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>');
});
4

2 回答 2

10

正如@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>

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

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

于 2013-05-13T20:38:55.173 回答
0

我会首先从删除表格开始。在显示实际的“表格数据”时，使用表格实际上是唯一的最佳做法。 

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

于 2013-05-13T19:20:18.783 回答