Question

我有一个如下所示的表结构，如何对同一个类表行进行分组，并在同一个类tr的第一个表行之前插入包含相同元素的数据标题的新表行：

<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>
    <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 group tr元素具有相同的类并放置标题

1 个答案: