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

Wrap table rows without breaking HTML validation?

本文关键字：情况下 换行 验证 HTML      更新时间：2023-09-26

我有一个表，我想包装表行，但问题是我不知道与什么来包装这些家伙…如果我用<div>, <span>, <tr>, <td>…他们都破坏了我的认可。

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

这就是我想要它看起来唯一的问题是，我的HTML是无效的。
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>');
});

@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元素。如果你想让第二列在不同的位置开始，这是唯一的方法。

我将首先从删除表开始。只有在显示实际的"表格数据"时才使用表才是最佳实践。

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

相关文章：