Html data Grouping in Jquery

 

<style>

tr.group { border-top: 1px solid black; 

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tb" style="border-collapse:collapse;" cellpadding="5" width="500px">

    <thead>

        <tr>

            <th>No.</th>

            <th>Project</th>

            <th>Status</th>

            <th>cost</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Project1</td>

            <td>Open</td>

            <td>10</td>

        </tr>

        <tr>

            <td>2</td>

            <td>Project2</td>

            <td>Open</td>

            <td>20</td>

        </tr>

        <tr>

            <td>3</td>

            <td>Project3</td>

            <td>Open</td>

            <td>200</td>

        </tr>

        <tr>

            <td>4</td>

            <td>Project4</td>

            <td>Pending</td>

            <td>200</td>

        </tr>

        <tr>

            <td>5</td>

            <td>Project6</td>

            <td>Pending</td>

            <td>200</td>

        </tr>

        <tr>

            <td>6</td>

            <td>Project7</td>

            <td>Pending</td>

            <td>200</td>

        </tr>

        <tr>

            <td>7</td>

            <td>Project7</td>

            <td>closed</td>

            <td>200</td>

        </tr>

        <tr>

            <td>7</td>

            <td>Project8</td>

            <td>closed</td>

            <td>200</td>

        </tr>

    </tbody>

</table>

<script>

function groupRows() {

    var last = null;

var first=null;

    $("table tbody tr td:nth-child(3)").each(function() {

        if ((last) && (last != this.innerText)) {

           $(this).parent().addClass("group");

$(this).parent().before('<tr><td colspan="5">my data</td></tr>');

//$('#tb tbody').append('<tr><td colspan="5">my data</td></tr>');

        } 

        last = this.innerText;

   

    

    });

}

groupRows();

</script>