Tuesday, August 6, 2019

How to remove same data in a table row by javascript.

<table id="tbl" border="1" cellpadding="3" cellspacing="0">
                                        <tr><th>Category</th><th>Product</th><th>Size</th><th>Price</th><th>Shipping</th></tr>
                                        <tr><td>Category-1</td><td>Product-1</td><td>Big</td><td>102</td><td>Free</td></tr>
                                        <tr><td>Category-1</td><td>Product-1</td><td>Big</td><td>132</td><td>Free</td></tr>
                                        <tr><td>Category-1</td><td>Product-2</td><td>Big</td><td>130</td><td>Free</td></tr>
                                        <tr><td>Category-1</td><td>Product-2</td><td>Small</td><td>100</td><td>Free</td></tr>
                                        <tr><td>Category-2</td><td>Product-3</td><td>Big</td><td>130</td><td>Free</td></tr>
                                        <tr><td>Category-2</td><td>Product-3</td><td>Big</td><td>100</td><td>Free</td></tr>
                                        <tr><td>Category-2</td><td>Product-3</td><td>Small</td><td>100</td><td>10</td></tr>
                                        <tr><td>Category-2</td><td>Product-4</td><td>Big</td><td>150</td><td>10</td></tr>
                                        <tr><td>Category-3</td><td>Product-5</td><td>Big</td><td>150</td><td>10</td></tr>
                                        <tr><td>Category-3</td><td>Product-5</td><td>Small</td><td>120</td><td>10</td></tr>
                                        <tr><td>Category-3</td><td>Product-5</td><td>Big</td><td>120</td><td>Free</td></tr>
                                        <tr><td>Category-4</td><td>Product-6</td><td>Big</td><td>120</td><td>10</td></tr>
                                        <tr><td>Category-4</td><td>Product-6</td><td>Small</td><td>120</td><td>10</td></tr>
                                    </table>

-----------------------------------------------------------------------------

 $(function () {
                  
                    function groupTable($rows, startIndex, total) {
                        if (total === 0) {
                            return;
                        }
                        var i, currentIndex = startIndex, count = 1, lst = [];
                        var tds = $rows.find('td:eq(' + currentIndex + ')');
                        var ctrl = $(tds[0]);
                        lst.push($rows[0]);
                        for (i = 1; i <= tds.length; i++) {
                            if (ctrl.text() == $(tds[i]).text()) {
                                count++;
                                $(tds[i]).addClass('deleted');
                                lst.push($rows[i]);
                            }
                            else {
                                if (count > 1) {
                                    ctrl.attr('rowspan', count);
                                    groupTable($(lst), startIndex + 1, total - 1)
                                }
                                count = 1;
                                lst = [];
                                ctrl = $(tds[i]);
                                lst.push($rows[i]);
                            }
                        }
                    }
                    groupTable($('#tbl tr:has(td)'), 0, 3);
                    $('#tbl .deleted').remove();

                });