How can I create a HTML table with two headers and data from DB

Question

0.00/5 (No votes)

See more:

Hello everyone,

i want to schom data from DB in a table with two headers, on top and one column on the left side. with Jquery I can di this but only with top header, can enybody explain me, how can I do in on a lesft side too?

example:

headerTop1/ headerTop2/ headerTop3
header1/ dbcontent / dbcontent / dbcntent
header2/ dbcontent / dbcontent / dbcntent
header3 / dbcontent / dbcontent / dbcntent

any idea?

What I have tried:

$.ajax({
       type: "GET",
       url: "/Home/JsonWeekEvents",
       dataType: "JSON",
       success: function (result) {
           $.each(result, function (i, val) {
               var trow = $('<tr/>').data("id", val.Id);
               //trow.append('<td>' + val.Id + " " + '</td>');
               trow.append('<div style="padding:5px; width:100px; height:70px"></div>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Monday + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Tuesday  + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Wednesday  + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Thursday  +'</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Friday  +'</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Saturday +'</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + val.Sunday + '</td>');
               trow.append('<td style="padding:5px; width:100px; height:70px">' + '<a href="#" rel="events-week-edit" data-toggle="modal" data-target="#editWeekCenter">Edit Week</a>' + '</td>');
               //trow.append('<td>' + '<a href="#" rel="event-edit-details" data-toggle="modal" data-target="#editModalCenter">edit</a>' + " " + "|" + " " + '</td>');
               //trow.append('<td>' + '<a href="#" rel="event-delete" data-toggle="modal" data-target="#exampleModalCenter">delete</a>' + " " + '</td>');
               tab.append(trow);
           });
           $("tr:odd", tab).css('background-color', '#C4C4C4');
           $("#weekEvents").html(tab);
       },
       error: function () {
           alert("Failed! Please try again.");
       }
   });
   var tab = $('<table class=MyTable border=1 ></table>');
   var thead = $('<thead></thead>');

   thead.append('<th style="padding:5px">FSE' + " " + '</th>');
   thead.append('<th style="padding:5px">Monday' + " " + '</th>');
   thead.append('<th style="padding:5px">Tuesday' + " " + '</th>');
   thead.append('<th style="padding:5px">Wednesday' + " " + '</th>');
   thead.append('<th style="padding:5px">Thursday' + " " + '</th>');
   thead.append('<th style="padding:5px">Friday' + " " + '</th>');
   thead.append('<th style="padding:5px">Saturday' + " " + '</th>');
   thead.append('<th style="padding:5px">Sunday' + " " + '</th>');
   tab.append(thead);

Posted 15-May-20 2:15am

Member 14803832

Updated 15-May-20 6:14am

v2

Add a Solution

Comments

MadMyche 15-May-20 8:47am

This would work a lot better if you showed the ACTUAL code you are using for the table

Member 14803832 15-May-20 12:11pm

Here is my code:

$.ajax({
type: "GET",
url: "/Home/JsonWeekEvents",
dataType: "JSON",
success: function (result) {
$.each(result, function (i, val) {
var trow = $('').data("id", val.Id);
//trow.append('' + val.Id + " " + '');
trow.append('');
trow.append('' + val.Monday + '');
trow.append('' + val.Tuesday + '');
trow.append('' + val.Wednesday + '');
trow.append('' + val.Thursday +'');
trow.append('' + val.Friday +'');
trow.append('' + val.Saturday +'');
trow.append('' + val.Sunday + '');
trow.append('' + 'Edit Week' + '');
//trow.append('' + 'edit' + " " + "|" + " " + '');
//trow.append('' + 'delete' + " " + '');
tab.append(trow);
});
$("tr:odd", tab).css('background-color', '#C4C4C4');
$("#weekEvents").html(tab);
},
error: function () {
alert("Failed! Please try again.");
}
});
var tab = $('');
var thead = $('');

thead.append('FSE' + " " + '');
thead.append('Monday' + " " + '');
thead.append('Tuesday' + " " + '');
thead.append('Wednesday' + " " + '');
thead.append('Thursday' + " " + '');
thead.append('Friday' + " " + '');
thead.append('Saturday' + " " + '');
thead.append('Sunday' + " " + '');
tab.append(thead);

where FSE is, I#d like to enter fixed column with Names of Service Engeneers

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

MadMyche · Answer 1 · 2020-05-15T03:39:00

Solution 1

If you are truly creating an HTML table, the actual syntactic element you would want to use is going to be a <th>Header</th>. How you generate that is going to be up to you.

One thing I did notice in your table diagram is that you only have 3 columns; 1 for each of the headers. Which is fine, but if you are going to be adding a column for headers on the left; you will need to fill that cell in up in the horizontal header. A TH or a TD must have content; best thing for an empty cell is to use an

The resulting code for your situation would be similar to this

HTML

<table>

<tr>
  <th>&nbsp;</th> <th>headerT1</th> <th>headerT2</th> <th>headerT3</th>
</tr><tr>
   <th>header1</th>    <td>dbcontent</td>  <td>dbcontent</td>  <td>dbcntent</td>
</tr><tr>
   <th>header2</th>    <td>dbcontent</td>  <td>dbcontent</td>  <td>dbcntent</td>
</tr><tr>
   <th>header3</th>    <td>dbcontent</td>  <td>dbcontent</td>  <td>dbcntent</td>
</tr>

</table>

Posted 15-May-20 3:39am

MadMyche

Comments

Member 14803832 15-May-20 12:13pm

no, this is not what I looking for, this is easy, but to show data from DB on a "dbcontent" places, this is what I'm talking about

MadMyche 15-May-20 13:15pm

Yea it is easy... you should compare this to what is being generated by your AJAX routine

Member 14803832 15-May-20 13:19pm

Yes, but if I add a new th in an each loop, I#ll get the same name for each row, but i want to have different names for each row...

MadMyche 15-May-20 13:38pm

Aren't those names coming from the DB call?

Member 14803832 15-May-20 13:44pm

no, this is it, I want to hardcode it into a table by creating it, otherweise I need to copy this names for every number of rows on a page...

Member 14803832 15-May-20 13:48pm

short to say I have a fixed number of workers and endless number of weeks for every worker and it should repeats every circle

MadMyche 15-May-20 15:04pm

It would be much easier to return their names with the dataset

Member 14803832 15-May-20 15:07pm

looks like that, i've just hoped i can avoid this repeats for every ciecle in DB

Member 14803832 15-May-20 15:08pm

have You an example for it?

MadMyche 15-May-20 16:53pm

I don't have a copy of your application- but I would start looking at the Model that is being referenced by this action: /Home/JsonWeekEvents