CODEWITHSUNDEEP
javascriptjqueryhtml
Andy Chaves
Andy Chaves

Reputation: 137

JS - Help - Grouping Rows

I need to group these rows that are being returned from a data base. Unfortunately in the data base they create a new complete record for each contact information.

VIEW:

Name    TZ         Office    Cell      Home      Email
Andres  2442 3667  -         -         -         -
Andres  -          999-99-99 -         -         -
Andres  -          -         999-99-99 -         -
Andres  -          -         -         999-99-99 -
Andres  -          -         -         -         [email protected]

HTML CODE

<table id="gptable">
<thead>
    <td>Name</td>
    <td>TZ</td>
    <td>Office</td>
    <td>Cell</td>
    <td>Home</td>
    <td>Email</td>
</thead>
<tbody>
    <tr>
    <td>Andres</td>
    <td>2442 3667</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>    
    </tr>
            <tr>
    <td>Andres</td>
    <td>-</td>
    <td>999-99-99</td>
    <td>-</td>
    <td >-</td>
    <td >-</td>    
    </tr> 
            <tr>
    <td>Andres</td>
    <td>-</td>
    <td>-</td>
    <td>999-99-99</td>
    <td>-</td>
    <td>-</td>    
    </tr> 
            <tr>
    <td>Andres</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>999-99-99</td>
    <td>-</td>    
    </tr> 
            <tr>
    <td>Andres</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>-</td>
    <td>[email protected]</td>    
    </tr> 

</tbody>

So how can I group all this rows in just one ? Fiddle.

Upvotes: 0

Views: 57

Answers (2)

Alberto Montellano
Alberto Montellano

Reputation: 6256

I think yes, you can group all of them into one row. Try this :

var $body = $('#gptable').find('tbody');
var $rows = $body.find('tr');
var newBody = document.createElement('tr');

var indexCounter = 1;
jQuery.each($rows, function (i, item) {
    if (i === 0) {
        $(newBody).append('<td>' + $(item).find('td').get(0).innerHTML + '</td>');
    }

    $(newBody).append('<td>' + $(item).find('td').get(indexCounter).innerHTML + '</td>');
    indexCounter++;
});

$('#gptable').find('tbody').empty().append(newBody);

Then, you got your grouped row:

Name    TZ  Office  Cell    Home    Email
Andres  2442 3667   999-99-99   999-99-99   999-99-99   [email protected]

I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/YZtkf/

Upvotes: 1

user3141031
user3141031

Reputation:

Storing each field in the database as an individual record is very bad practice. But if you cannot change it, something like this should work in jQuery:

$(document).ready(function() {
    var str = first = "";
    $("#gptable tbody").each(function(l, tbody) {
       $(this).find("tr").each(function(i, tr) {
            $(tr).find("td").each(function(j, td) {
                if($(this).html() != "-" && j != 0) {
                    str += "<td>" + $(this).html() + "</td>";
                } else if(first == "") {
                    first = "<td>" + $(this).html() + "</td>";
                }
            });
       });
       $('#gptable tbody').empty();
       $('#gptable tbody').after("<tr>" + first + str + "</tr>");
    });
});

Here's your fiddle: http://jsfiddle.net/65wYn/2/

Upvotes: 1

Related Questions