Jquery 将具有相同 class 的 tr 元素分组并放入 header

Question

我有一个如下所示的 table 结构，我怎样才能将相同的 class table 行分组并插入一个包含数据标题的新 table 行相同 class tr:

的第一个 table 行之前的相同元素

<table>
    <tbody>
        <tr class="section section_2" data-title="Data Title 2">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="section section_2" data-title="Data Title 2">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="section section_1" data-title="Data Title 1">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="section section_3" data-title="Data Title 3">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="section section_3" data-title="Data Title 3">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

因此新的结构化 table 将如下所示：

<table>
    <tbody>
        <tr><td colspan="3">Data Title 2</td></tr>
        <tr class="section section_2" data-title="Data Title 2">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="section section_2" data-title="Data Title 2">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr><td colspan="3">Data Title 1</td></tr>
        <tr class="section section_1" data-title="Data Title 1">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr><td colspan="3">Data Title 3</td></tr>
        <tr class="section section_3" data-title="Data Title 3">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="section section_3" data-title="Data Title 3">
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

Answer 1

使用您的 html 示例（第一个）

var titles =[] ;
$.each ($('tr.section'), function (index, elt) {
    var title =$(elt).attr ('data-title') ;
    if ( $.inArray (title, titles) == -1 )
        $('<tr><td colspan="3">' + title + '</td></tr>').insertBefore ($(elt)) ;
    titles.push (title) ;
}) ;

您将获得第二个样本

Jquery 将具有相同 class 的 tr 元素分组并放入 header

Jquery group tr elements with same class and put header

jquery

grouping

html-table