table section push

by Torwan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
		<thead>
				<tr>
						<th>Nazwa</th>
						<th>Kod produktu</th>
						<th>ilo</th>
				</tr>
		</thead>
    <tbody>
        <tr class="section section_2" data-title="Data Title 1">
            <td>Produkt 1</td>
            <td>Xa12</td>
            <td>data1</td>
        </tr>
        <tr class="section section_2" data-title="Data Title 1">
            <td>data2</td>
            <td>data2</td>
            <td>data2</td>
        </tr>
        <tr class="section section_1" data-title="Data Title 2">
            <td>data3</td>
            <td>data3</td>
            <td>data3</td>
        </tr>
        <tr class="section section_3" data-title="Data Title 3">
            <td>data4</td>
            <td>data4</td>
            <td>data4</td>
        </tr>
        <tr class="section section_3" data-title="Data Title 3">
            <td>data4</td>
            <td>data4</td>
            <td>data4</td>
        </tr>
    </tbody>
</table>

CSS

table, table td, table tr {border:1px solid #dadada;border-collapse:collapse;}

JavaScript

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