CODEWITHSUNDEEP
javascriptjqueryhtml-tablerows
Shota
Shota

Reputation: 513

How to change table (adding rowspan/colspan) with dynamically generated rows?

I have a table created automatically from data in database.

var rows  = "";
    rows += "<tr class='row_primary'>";
        rows += "<td>COL 1</td>";
        rows += "<td>COL 2</td>";
        rows += "<td>COL 3</td>";
    rows += "</tr>";



    $.each(data.db_values, function(i, results){     //This is from database with n rows depend on n results
        rows += "<tr class='row_secondary'>";
            rows += "<td>COL 1</td>";
            rows += "<td>results.ID</td>";
            rows += "<td>COL 3</td>";
        rows += "</tr>";
    });

 $('#t_barang tbody').append(rows);

My idea is to adding rowspan after the table is created. But, it seems not working as it should be. I tried adding $('#t_barang tbody tr').attr('rowspan', '5'); for a 5 row table. But, it is not change the table.

current result:

COL1  COL2   COL3
COL1  DATA1  COL3
COL1  DATA2  COL3
COL1  DATA3  COL3
COL1  DATA4  COL3

Expected result:

       COL2   
       DATA1  
  COL1 DATA2 COL3
       DATA3  
       DATA4

Upvotes: 1

Views: 602

Answers (1)

ronydavid
ronydavid

Reputation: 383

I assume u already know you database data length from the first time windows loaded. so u can do rowspan before you append your dynamic data to your table, so it will look like this in your js:

I asume you have database with 5 data provided:

database = [
        {id: 1},
        {id: 2},
        {id: 3},
        {id: 4},
        {id: 5},
    ];

then your rows will declare for the first time like this:

var rows  = "";
rows += "<tr class='row_primary'>";
    rows += "<td rowspan="+(database.length+1)+">COL 1</td>";
    rows += "<td>COL 2</td>";
    rows += "<td rowspan="+(database.length+1)+">COL 3</td>";
rows += "</tr>";

the rowspan are init here base on your database length + 1 (for your table header). then you can loop your data like this:

 $.each(database, function(i, results){ 
    rows += "<tr class='row_secondary'>";
        // rows += "<td>COL 1</td>";
        rows += "<td>"+results.id+"</td>";
        // rows += "<td>COL 3</td>";
    rows += "</tr>";
});

since you already init the rowspan you dont need to add the COL 1 and COL 2 to the rows , so I comment it.

for the record I already test this code and works well so let me know it you need something more.

Upvotes: 3

Related Questions