插入< thead>在HTML中使用jQuery吗?

问题描述

如何使用jQuery插入<thead>和<\thead>?

How can I insert <thead> and <\thead> using jQuery?

     <table class="Grid">
<!-- insert <thead> -->
                <tr class="GridHeader">
                    <th>BU</th><th>Function</th>
                </tr>
                <tr class="GridHeader">
                    <th>&nbsp;</th><th>&nbsp;</th>
                </tr>
    <!-- insert </thead> -->

推荐答案

这可能有些棘手，因为默认情况下，如果您自己不包含<tr>元素，则某些浏览器会将<tr>元素包装在<tbody>中. Firefox 19和Chrome 26可以做到这一点. IE 10没有.仅执行wrapAll会导致以下无效的HTML:

This can be a little tricky, because some browsers will wrap your <tr> elements in a <tbody> by default if you don't include one yourself. Firefox 19 and Chrome 26 do this. IE 10 does not. Only doing a wrapAll will result in the following invalid HTML:

<table class="Grid">
    <tbody>
        <thead>
            <tr class="GridHeader">
                <th>BU</th><th>Function</th>
            </tr>
            <tr class="GridHeader">
                <th>&nbsp;</th><th>&nbsp;</th>
            </tr>
        </thead>
    </tbody>
</table>

如果您比较原始标记(单击后的标记)，则可以使用此jsFiddle 自己查看此行为.包装，然后单击"Prepend"后添加标记.

You can see this behavior for yourself using this jsFiddle if you compare the original markup, the markup after clicking Wrap, and the markup after clicking Prepend.

要解决此问题，如 jsfiddle 所示，您还需要删除新添加的<thead>和重新添加到<table>:

To overcome this, as the jsfiddle shows, you need to also remove the newly added <thead> and prepend it back to the <table>:

$('.GridHeader').wrapAll('<thead>');
$('.Grid thead').remove().prependTo('.Grid');

这篇关于插入< thead>在HTML中使用jQuery吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！