Jquery Format HTML Table in a Given Format

Question

Am trying to display query contents in HTMl using following jquery

    $tableSearch = $('#table-search');
    $tableSearch.html('<tr><th>Name</th><tr><th>Hours</tr></th><tr><th>MB</th></tr>'); 
    result.forEach(function(row) {
     $('#table-search tr').append('<td>'+ row.Date +'</td>'+'<td>'+ row.Hours+'</td>'+'<td>'+ row.MB+'</td>'); 
        });

But it gives the result like below

Actually I want the result like this

How to format those values like above.

Please click edit, then [<>] snippet editor and post a minimal reproducible example with relevant input — mplungjan
– mplungjan, Commented Feb 19, 2020 at 10:02
Also there is no way <tr><th>Name</th><tr><th>Hours</tr></th><tr><th>MB</th></tr> will give you a vertical header on its own — mplungjan
– mplungjan, Commented Feb 19, 2020 at 10:04
Lastly there is no PHP issue here unless you want to do the code on the server — mplungjan
– mplungjan, Commented Feb 19, 2020 at 10:05
they come from somewhere. The logic in PHP would be the same as in JS. So you need to make a choice. — mplungjan
– mplungjan, Commented Feb 19, 2020 at 10:13

Hems · Accepted Answer · 2020-02-19 10:38:36Z

1

First, you need to define class or id on <tr> tag of table header row, And then append the data as class/id wise row.

$tableSearch = $('#table-search');
    $tableSearch.html('<tr class="tr1"><th>Name</th><tr class="tr2"><th>Hours</tr></th><tr class="tr3"><th>MB</th></tr>'); 
    result.forEach(function(row) {
    $('#table-search .tr1').append('<td>'+ row.Date +'</td>');
     $('#table-search .tr2').append('<td>'+ row.Hours+'</td>');
     $('#table-search .tr3').append('<td>'+ row.MB+'</td>');
   });

edited Feb 19, 2020 at 10:38

answered Feb 19, 2020 at 10:32

Hems

2892 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery Format HTML Table in a Given Format

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related