Simplify HTML table with Javascript
0
I wanted to create table to looks more simple using a PHP array and I need some help using Javascript.
Originally I wanted to create table like the first one, then I had problem due to limitation from provider of the PHP array.
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td colspan="5">Economically Active</td>
<td rowspan="3">Percentage of Working to Economically Active</td>
<td colspan="4">Not Economically Active</td>
<td rowspan="3">Total</td>
<td rowspan="3">Percentage of Economically Active to Working Age Population</td>
</tr>
<tr>
<td rowspan="2">Working</td>
<td colspan="3">Unemployment</td>
<td rowspan="2">Total of Economically Active</td>
<td rowspan="2">Attending School</td>
<td rowspan="2">Housekeeping</td>
<td rowspan="2">Total of Not Economically Active</td>
</tr>
<tr>
<td>Ever Worked</td>
<td>Never Worked</td>
<td>Total</td>
</tr>
</thead>
</table>Due to limitation from developer, I was given a specific PHP array and printed like this:
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td></td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td></td><td></td></tr><tr><td></td><td>Unemployment</td><td>Unemployment</td><td>Unemployment</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>Working</td><td>Ever Worked</td><td>Never Worked</td><td>Total</td><td>Total of Economically Active</td><td>Percentage of Working to Economically Active</td><td>Attending School</td><td>Housekeeping</td><td>Others</td><td>Total of Not Economically Active</td><td>Total</td><td>Percentage of Economically Active to Working Age Population</td></tr><tr> </tr>
</thead>
</table>It would be a great if you help me solved this problem
javascript jquery html-table
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
add a comment |
0
I wanted to create table to looks more simple using a PHP array and I need some help using Javascript.
Originally I wanted to create table like the first one, then I had problem due to limitation from provider of the PHP array.
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td colspan="5">Economically Active</td>
<td rowspan="3">Percentage of Working to Economically Active</td>
<td colspan="4">Not Economically Active</td>
<td rowspan="3">Total</td>
<td rowspan="3">Percentage of Economically Active to Working Age Population</td>
</tr>
<tr>
<td rowspan="2">Working</td>
<td colspan="3">Unemployment</td>
<td rowspan="2">Total of Economically Active</td>
<td rowspan="2">Attending School</td>
<td rowspan="2">Housekeeping</td>
<td rowspan="2">Total of Not Economically Active</td>
</tr>
<tr>
<td>Ever Worked</td>
<td>Never Worked</td>
<td>Total</td>
</tr>
</thead>
</table>Due to limitation from developer, I was given a specific PHP array and printed like this:
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td></td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td></td><td></td></tr><tr><td></td><td>Unemployment</td><td>Unemployment</td><td>Unemployment</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>Working</td><td>Ever Worked</td><td>Never Worked</td><td>Total</td><td>Total of Economically Active</td><td>Percentage of Working to Economically Active</td><td>Attending School</td><td>Housekeeping</td><td>Others</td><td>Total of Not Economically Active</td><td>Total</td><td>Percentage of Economically Active to Working Age Population</td></tr><tr> </tr>
</thead>
</table>It would be a great if you help me solved this problem
javascript jquery html-table
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
why are you not using ajax to get data and append into dom with html table
– Negi Rox
Nov 15 '18 at 10:18
You'd want to show the data array you mentioned in your post. When you do you'll probably get three or four answers almost right away as the alg will be very straightforward.
– Tim Consolazio
Nov 15 '18 at 11:11
add a comment |
0
0
0
I wanted to create table to looks more simple using a PHP array and I need some help using Javascript.
Originally I wanted to create table like the first one, then I had problem due to limitation from provider of the PHP array.
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td colspan="5">Economically Active</td>
<td rowspan="3">Percentage of Working to Economically Active</td>
<td colspan="4">Not Economically Active</td>
<td rowspan="3">Total</td>
<td rowspan="3">Percentage of Economically Active to Working Age Population</td>
</tr>
<tr>
<td rowspan="2">Working</td>
<td colspan="3">Unemployment</td>
<td rowspan="2">Total of Economically Active</td>
<td rowspan="2">Attending School</td>
<td rowspan="2">Housekeeping</td>
<td rowspan="2">Total of Not Economically Active</td>
</tr>
<tr>
<td>Ever Worked</td>
<td>Never Worked</td>
<td>Total</td>
</tr>
</thead>
</table>Due to limitation from developer, I was given a specific PHP array and printed like this:
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td></td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td></td><td></td></tr><tr><td></td><td>Unemployment</td><td>Unemployment</td><td>Unemployment</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>Working</td><td>Ever Worked</td><td>Never Worked</td><td>Total</td><td>Total of Economically Active</td><td>Percentage of Working to Economically Active</td><td>Attending School</td><td>Housekeeping</td><td>Others</td><td>Total of Not Economically Active</td><td>Total</td><td>Percentage of Economically Active to Working Age Population</td></tr><tr> </tr>
</thead>
</table>It would be a great if you help me solved this problem
javascript jquery html-table
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
I wanted to create table to looks more simple using a PHP array and I need some help using Javascript.
Originally I wanted to create table like the first one, then I had problem due to limitation from provider of the PHP array.
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td colspan="5">Economically Active</td>
<td rowspan="3">Percentage of Working to Economically Active</td>
<td colspan="4">Not Economically Active</td>
<td rowspan="3">Total</td>
<td rowspan="3">Percentage of Economically Active to Working Age Population</td>
</tr>
<tr>
<td rowspan="2">Working</td>
<td colspan="3">Unemployment</td>
<td rowspan="2">Total of Economically Active</td>
<td rowspan="2">Attending School</td>
<td rowspan="2">Housekeeping</td>
<td rowspan="2">Total of Not Economically Active</td>
</tr>
<tr>
<td>Ever Worked</td>
<td>Never Worked</td>
<td>Total</td>
</tr>
</thead>
</table>Due to limitation from developer, I was given a specific PHP array and printed like this:
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td></td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td></td><td></td></tr><tr><td></td><td>Unemployment</td><td>Unemployment</td><td>Unemployment</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>Working</td><td>Ever Worked</td><td>Never Worked</td><td>Total</td><td>Total of Economically Active</td><td>Percentage of Working to Economically Active</td><td>Attending School</td><td>Housekeeping</td><td>Others</td><td>Total of Not Economically Active</td><td>Total</td><td>Percentage of Economically Active to Working Age Population</td></tr><tr> </tr>
</thead>
</table>It would be a great if you help me solved this problem
<style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td colspan="5">Economically Active</td>
<td rowspan="3">Percentage of Working to Economically Active</td>
<td colspan="4">Not Economically Active</td>
<td rowspan="3">Total</td>
<td rowspan="3">Percentage of Economically Active to Working Age Population</td>
</tr>
<tr>
<td rowspan="2">Working</td>
<td colspan="3">Unemployment</td>
<td rowspan="2">Total of Economically Active</td>
<td rowspan="2">Attending School</td>
<td rowspan="2">Housekeeping</td>
<td rowspan="2">Total of Not Economically Active</td>
</tr>
<tr>
<td>Ever Worked</td>
<td>Never Worked</td>
<td>Total</td>
</tr>
</thead>
</table><style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td colspan="5">Economically Active</td>
<td rowspan="3">Percentage of Working to Economically Active</td>
<td colspan="4">Not Economically Active</td>
<td rowspan="3">Total</td>
<td rowspan="3">Percentage of Economically Active to Working Age Population</td>
</tr>
<tr>
<td rowspan="2">Working</td>
<td colspan="3">Unemployment</td>
<td rowspan="2">Total of Economically Active</td>
<td rowspan="2">Attending School</td>
<td rowspan="2">Housekeeping</td>
<td rowspan="2">Total of Not Economically Active</td>
</tr>
<tr>
<td>Ever Worked</td>
<td>Never Worked</td>
<td>Total</td>
</tr>
</thead>
</table><style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td></td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td></td><td></td></tr><tr><td></td><td>Unemployment</td><td>Unemployment</td><td>Unemployment</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>Working</td><td>Ever Worked</td><td>Never Worked</td><td>Total</td><td>Total of Economically Active</td><td>Percentage of Working to Economically Active</td><td>Attending School</td><td>Housekeeping</td><td>Others</td><td>Total of Not Economically Active</td><td>Total</td><td>Percentage of Economically Active to Working Age Population</td></tr><tr> </tr>
</thead>
</table><style>
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
</style>
<table>
<thead>
<tr>
<td rowspan="3">Scope/Coverage</td>
<td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td>Economically Active</td><td></td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td>Not Economically Active</td><td></td><td></td></tr><tr><td></td><td>Unemployment</td><td>Unemployment</td><td>Unemployment</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>Working</td><td>Ever Worked</td><td>Never Worked</td><td>Total</td><td>Total of Economically Active</td><td>Percentage of Working to Economically Active</td><td>Attending School</td><td>Housekeeping</td><td>Others</td><td>Total of Not Economically Active</td><td>Total</td><td>Percentage of Economically Active to Working Age Population</td></tr><tr> </tr>
</thead>
</table>javascript jquery html-table
javascript jquery html-table
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
edited Nov 15 '18 at 11:02
Brian Tompsett - 汤莱恩
4,2421338102
4,2421338102
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
asked Nov 15 '18 at 10:16
Wahyu SetiawanWahyu Setiawan
63
63
why are you not using ajax to get data and append into dom with html table
– Negi Rox
Nov 15 '18 at 10:18
You'd want to show the data array you mentioned in your post. When you do you'll probably get three or four answers almost right away as the alg will be very straightforward.
– Tim Consolazio
Nov 15 '18 at 11:11
add a comment |
why are you not using ajax to get data and append into dom with html table
– Negi Rox
Nov 15 '18 at 10:18
You'd want to show the data array you mentioned in your post. When you do you'll probably get three or four answers almost right away as the alg will be very straightforward.
– Tim Consolazio
Nov 15 '18 at 11:11
why are you not using ajax to get data and append into dom with html table
– Negi Rox
Nov 15 '18 at 10:18
why are you not using ajax to get data and append into dom with html table
– Negi Rox
Nov 15 '18 at 10:18
You'd want to show the data array you mentioned in your post. When you do you'll probably get three or four answers almost right away as the alg will be very straightforward.
– Tim Consolazio
Nov 15 '18 at 11:11
You'd want to show the data array you mentioned in your post. When you do you'll probably get three or four answers almost right away as the alg will be very straightforward.
– Tim Consolazio
Nov 15 '18 at 11:11
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317115%2fsimplify-html-table-with-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317115%2fsimplify-html-table-with-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
why are you not using ajax to get data and append into dom with html table
– Negi Rox
Nov 15 '18 at 10:18
You'd want to show the data array you mentioned in your post. When you do you'll probably get three or four answers almost right away as the alg will be very straightforward.
– Tim Consolazio
Nov 15 '18 at 11:11