Convert Html Table To Paragraph With GroupingWhat are valid values for the id attribute in HTML?Add table row in jQueryHow can I convert a string to boolean in JavaScript?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Convert form data to JavaScript object with jQueryHTML 5: Is it <br>, <br/>, or <br />?How to create an HTML button that acts like a link?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?
Do Milankovitch Cycles fully explain climate change?
Two different colors in an Illustrator stroke / line
SCOTUS - Can Congress overrule Marbury v. Madison by statute?
What does "synoptic" mean in avionics?
SQL Server table with 4,000,000 rows is 40GB
Can I use ratchet straps to lift a dolly into a truck bed?
Dividing Divisive Divisors
Is it appropriate for a professor to require students to sign a non-disclosure agreement before being taught?
Do any aircraft carry boats?
Why should I always enable compiler warnings?
How to circle together certain entries of a matrix?
Why is there a が in 深淵に臨むが如し?
2.5 year old daughter refuses to take medicine
RP Automatic Updates
Why would thermal imaging be used to locate the Chandrayaan-2 lander?
Writing a love interest for my hero
What was the first LISP compiler?
Wrathful Smite, and the term 'Creature'
What is negative current?
Why are some Mac apps not available on AppStore?
Are there take-over requests from autopilots?
Is there a basic list of ways in which a low-level Rogue can get advantage for sneak attack?
How do I politely hint customers to leave my store, without pretending to need leave store myself?
I changed a word from a source, how do I cite it correctly?
Convert Html Table To Paragraph With Grouping
What are valid values for the id attribute in HTML?Add table row in jQueryHow can I convert a string to boolean in JavaScript?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Convert form data to JavaScript object with jQueryHTML 5: Is it <br>, <br/>, or <br />?How to create an HTML button that acts like a link?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
4
I have a simple table;
table, th, td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable"><tbody><tr><th>Distirict</th><th>Block</th><th>Parcel</th></tr><tr><td>İlyas</td><td>203</td><td>18</td></tr><tr><td>İlyas</td><td>208</td><td>41</td></tr><tr><td>İlyas</td><td>205</td><td>24</td></tr><tr><td>İlyas</td><td>203</td><td>28</td></tr><tr><td>İlyas</td><td>203</td><td>31</td></tr><tr><td>İlyas</td><td>208</td><td>43</td></tr><tr><td>İlyas</td><td>209</td><td>41</td></tr><tr><td>İlyas</td><td>208</td><td>40</td></tr><tr><td>İlyas</td><td>203</td><td>36</td></tr><tr><td>İlyas</td><td>205</td><td>14</td></tr><tr><td>İlyas</td><td>205</td><td>7</td></tr><tr><td>İlyas</td><td>203</td><td>21</td></tr><tr><td>İlyas</td><td>203</td><td>25</td></tr><tr><td>İlyas</td><td>208</td><td>42</td></tr><tr><td>İlyas</td><td>205</td><td>10</td></tr></tbody></table>I need to paragraph it like this,
District İlyas , 203 Block 18,31,36,... parcels, 205 Block 7,14,24,.. parcels, 209 Block 41 parcels etc.
Try to convert html Table to Json object then groupBy and strimgfy it but i failed.
First place use pure Javascript or Jquery by may accept external JS.
Thx for answers.
javascript jquery html
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
add a comment |
4
I have a simple table;
table, th, td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable"><tbody><tr><th>Distirict</th><th>Block</th><th>Parcel</th></tr><tr><td>İlyas</td><td>203</td><td>18</td></tr><tr><td>İlyas</td><td>208</td><td>41</td></tr><tr><td>İlyas</td><td>205</td><td>24</td></tr><tr><td>İlyas</td><td>203</td><td>28</td></tr><tr><td>İlyas</td><td>203</td><td>31</td></tr><tr><td>İlyas</td><td>208</td><td>43</td></tr><tr><td>İlyas</td><td>209</td><td>41</td></tr><tr><td>İlyas</td><td>208</td><td>40</td></tr><tr><td>İlyas</td><td>203</td><td>36</td></tr><tr><td>İlyas</td><td>205</td><td>14</td></tr><tr><td>İlyas</td><td>205</td><td>7</td></tr><tr><td>İlyas</td><td>203</td><td>21</td></tr><tr><td>İlyas</td><td>203</td><td>25</td></tr><tr><td>İlyas</td><td>208</td><td>42</td></tr><tr><td>İlyas</td><td>205</td><td>10</td></tr></tbody></table>I need to paragraph it like this,
District İlyas , 203 Block 18,31,36,... parcels, 205 Block 7,14,24,.. parcels, 209 Block 41 parcels etc.
Try to convert html Table to Json object then groupBy and strimgfy it but i failed.
First place use pure Javascript or Jquery by may accept external JS.
Thx for answers.
javascript jquery html
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
you may sort your data in advance and take the grouped result for building the table.
– Nina Scholz
Mar 28 at 8:13
On what basis you want to group>
– Maheer Ali
Mar 28 at 8:15
add a comment |
4
4
4
I have a simple table;
table, th, td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable"><tbody><tr><th>Distirict</th><th>Block</th><th>Parcel</th></tr><tr><td>İlyas</td><td>203</td><td>18</td></tr><tr><td>İlyas</td><td>208</td><td>41</td></tr><tr><td>İlyas</td><td>205</td><td>24</td></tr><tr><td>İlyas</td><td>203</td><td>28</td></tr><tr><td>İlyas</td><td>203</td><td>31</td></tr><tr><td>İlyas</td><td>208</td><td>43</td></tr><tr><td>İlyas</td><td>209</td><td>41</td></tr><tr><td>İlyas</td><td>208</td><td>40</td></tr><tr><td>İlyas</td><td>203</td><td>36</td></tr><tr><td>İlyas</td><td>205</td><td>14</td></tr><tr><td>İlyas</td><td>205</td><td>7</td></tr><tr><td>İlyas</td><td>203</td><td>21</td></tr><tr><td>İlyas</td><td>203</td><td>25</td></tr><tr><td>İlyas</td><td>208</td><td>42</td></tr><tr><td>İlyas</td><td>205</td><td>10</td></tr></tbody></table>I need to paragraph it like this,
District İlyas , 203 Block 18,31,36,... parcels, 205 Block 7,14,24,.. parcels, 209 Block 41 parcels etc.
Try to convert html Table to Json object then groupBy and strimgfy it but i failed.
First place use pure Javascript or Jquery by may accept external JS.
Thx for answers.
javascript jquery html
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
I have a simple table;
table, th, td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable"><tbody><tr><th>Distirict</th><th>Block</th><th>Parcel</th></tr><tr><td>İlyas</td><td>203</td><td>18</td></tr><tr><td>İlyas</td><td>208</td><td>41</td></tr><tr><td>İlyas</td><td>205</td><td>24</td></tr><tr><td>İlyas</td><td>203</td><td>28</td></tr><tr><td>İlyas</td><td>203</td><td>31</td></tr><tr><td>İlyas</td><td>208</td><td>43</td></tr><tr><td>İlyas</td><td>209</td><td>41</td></tr><tr><td>İlyas</td><td>208</td><td>40</td></tr><tr><td>İlyas</td><td>203</td><td>36</td></tr><tr><td>İlyas</td><td>205</td><td>14</td></tr><tr><td>İlyas</td><td>205</td><td>7</td></tr><tr><td>İlyas</td><td>203</td><td>21</td></tr><tr><td>İlyas</td><td>203</td><td>25</td></tr><tr><td>İlyas</td><td>208</td><td>42</td></tr><tr><td>İlyas</td><td>205</td><td>10</td></tr></tbody></table>I need to paragraph it like this,
District İlyas , 203 Block 18,31,36,... parcels, 205 Block 7,14,24,.. parcels, 209 Block 41 parcels etc.
Try to convert html Table to Json object then groupBy and strimgfy it but i failed.
First place use pure Javascript or Jquery by may accept external JS.
Thx for answers.
table, th, td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable"><tbody><tr><th>Distirict</th><th>Block</th><th>Parcel</th></tr><tr><td>İlyas</td><td>203</td><td>18</td></tr><tr><td>İlyas</td><td>208</td><td>41</td></tr><tr><td>İlyas</td><td>205</td><td>24</td></tr><tr><td>İlyas</td><td>203</td><td>28</td></tr><tr><td>İlyas</td><td>203</td><td>31</td></tr><tr><td>İlyas</td><td>208</td><td>43</td></tr><tr><td>İlyas</td><td>209</td><td>41</td></tr><tr><td>İlyas</td><td>208</td><td>40</td></tr><tr><td>İlyas</td><td>203</td><td>36</td></tr><tr><td>İlyas</td><td>205</td><td>14</td></tr><tr><td>İlyas</td><td>205</td><td>7</td></tr><tr><td>İlyas</td><td>203</td><td>21</td></tr><tr><td>İlyas</td><td>203</td><td>25</td></tr><tr><td>İlyas</td><td>208</td><td>42</td></tr><tr><td>İlyas</td><td>205</td><td>10</td></tr></tbody></table>table, th, td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable"><tbody><tr><th>Distirict</th><th>Block</th><th>Parcel</th></tr><tr><td>İlyas</td><td>203</td><td>18</td></tr><tr><td>İlyas</td><td>208</td><td>41</td></tr><tr><td>İlyas</td><td>205</td><td>24</td></tr><tr><td>İlyas</td><td>203</td><td>28</td></tr><tr><td>İlyas</td><td>203</td><td>31</td></tr><tr><td>İlyas</td><td>208</td><td>43</td></tr><tr><td>İlyas</td><td>209</td><td>41</td></tr><tr><td>İlyas</td><td>208</td><td>40</td></tr><tr><td>İlyas</td><td>203</td><td>36</td></tr><tr><td>İlyas</td><td>205</td><td>14</td></tr><tr><td>İlyas</td><td>205</td><td>7</td></tr><tr><td>İlyas</td><td>203</td><td>21</td></tr><tr><td>İlyas</td><td>203</td><td>25</td></tr><tr><td>İlyas</td><td>208</td><td>42</td></tr><tr><td>İlyas</td><td>205</td><td>10</td></tr></tbody></table>javascript jquery html
javascript jquery html
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
edited Mar 28 at 8:12
David R
8,1875 gold badges33 silver badges54 bronze badges
8,1875 gold badges33 silver badges54 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
asked Mar 28 at 8:11
Barış Serkan AKINBarış Serkan AKIN
3533 silver badges11 bronze badges
3533 silver badges11 bronze badges
you may sort your data in advance and take the grouped result for building the table.
– Nina Scholz
Mar 28 at 8:13
On what basis you want to group>
– Maheer Ali
Mar 28 at 8:15
add a comment |
you may sort your data in advance and take the grouped result for building the table.
– Nina Scholz
Mar 28 at 8:13
On what basis you want to group>
– Maheer Ali
Mar 28 at 8:15
you may sort your data in advance and take the grouped result for building the table.
– Nina Scholz
Mar 28 at 8:13
you may sort your data in advance and take the grouped result for building the table.
– Nina Scholz
Mar 28 at 8:13
On what basis you want to group>
– Maheer Ali
Mar 28 at 8:15
On what basis you want to group>
– Maheer Ali
Mar 28 at 8:15
add a comment |
1 Answer
1
active
oldest
votes
3
Get all tr, iterate and generate an object based on the column values. Later reuse the object for generating paragraph.
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length) [];
// push the last column value
obj[v1][v2].push(v3);
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtml
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length)
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtmltable,
th,
td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>Same with jQuery:
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) =>
// get tds
let tds = $('td', e);
//get content of each column
let v1 = tds.eq(0).text().trim(),
v2 = tds.eq(1).text().trim(),
v3 = tds.eq(2).text().trim();
// define object if first col prop not defined
obj[v1] = obj[v1] , )
// get column headers
let cols = $('#raporTable tr th').map((_,e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) => ;
// define object if second col prop not defined in nested object
obj[v1][v2] = obj[v1][v2] , )
// get column headers
let cols = $('#raporTable tr th').map((_, e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)table,
th,
td
border: 1px solid black;
border-collapse: collapse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
it works well, thx.
– Barış Serkan AKIN
Mar 28 at 10:19
@BarışSerkanAKIN : glad it helped :)
– Pranav C Balan
Mar 28 at 10:20
1
@BarışSerkanAKIN Mark it answered if it had helped you then.
– David R
Mar 28 at 14:24
add a comment |
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/4.0/"u003ecc by-sa 4.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%2f55392823%2fconvert-html-table-to-paragraph-with-grouping%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
Get all tr, iterate and generate an object based on the column values. Later reuse the object for generating paragraph.
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length) [];
// push the last column value
obj[v1][v2].push(v3);
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtml
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length)
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtmltable,
th,
td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>Same with jQuery:
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) =>
// get tds
let tds = $('td', e);
//get content of each column
let v1 = tds.eq(0).text().trim(),
v2 = tds.eq(1).text().trim(),
v3 = tds.eq(2).text().trim();
// define object if first col prop not defined
obj[v1] = obj[v1] , )
// get column headers
let cols = $('#raporTable tr th').map((_,e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) => ;
// define object if second col prop not defined in nested object
obj[v1][v2] = obj[v1][v2] , )
// get column headers
let cols = $('#raporTable tr th').map((_, e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)table,
th,
td
border: 1px solid black;
border-collapse: collapse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
it works well, thx.
– Barış Serkan AKIN
Mar 28 at 10:19
@BarışSerkanAKIN : glad it helped :)
– Pranav C Balan
Mar 28 at 10:20
1
@BarışSerkanAKIN Mark it answered if it had helped you then.
– David R
Mar 28 at 14:24
add a comment |
3
Get all tr, iterate and generate an object based on the column values. Later reuse the object for generating paragraph.
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length) [];
// push the last column value
obj[v1][v2].push(v3);
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtml
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length)
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtmltable,
th,
td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>Same with jQuery:
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) =>
// get tds
let tds = $('td', e);
//get content of each column
let v1 = tds.eq(0).text().trim(),
v2 = tds.eq(1).text().trim(),
v3 = tds.eq(2).text().trim();
// define object if first col prop not defined
obj[v1] = obj[v1] , )
// get column headers
let cols = $('#raporTable tr th').map((_,e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) => ;
// define object if second col prop not defined in nested object
obj[v1][v2] = obj[v1][v2] , )
// get column headers
let cols = $('#raporTable tr th').map((_, e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)table,
th,
td
border: 1px solid black;
border-collapse: collapse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
it works well, thx.
– Barış Serkan AKIN
Mar 28 at 10:19
@BarışSerkanAKIN : glad it helped :)
– Pranav C Balan
Mar 28 at 10:20
1
@BarışSerkanAKIN Mark it answered if it had helped you then.
– David R
Mar 28 at 14:24
add a comment |
3
3
3
Get all tr, iterate and generate an object based on the column values. Later reuse the object for generating paragraph.
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length) [];
// push the last column value
obj[v1][v2].push(v3);
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtml
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length)
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtmltable,
th,
td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>Same with jQuery:
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) =>
// get tds
let tds = $('td', e);
//get content of each column
let v1 = tds.eq(0).text().trim(),
v2 = tds.eq(1).text().trim(),
v3 = tds.eq(2).text().trim();
// define object if first col prop not defined
obj[v1] = obj[v1] , )
// get column headers
let cols = $('#raporTable tr th').map((_,e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) => ;
// define object if second col prop not defined in nested object
obj[v1][v2] = obj[v1][v2] , )
// get column headers
let cols = $('#raporTable tr th').map((_, e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)table,
th,
td
border: 1px solid black;
border-collapse: collapse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
Get all tr, iterate and generate an object based on the column values. Later reuse the object for generating paragraph.
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length) [];
// push the last column value
obj[v1][v2].push(v3);
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtml
/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length)
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtmltable,
th,
td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>Same with jQuery:
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) =>
// get tds
let tds = $('td', e);
//get content of each column
let v1 = tds.eq(0).text().trim(),
v2 = tds.eq(1).text().trim(),
v3 = tds.eq(2).text().trim();
// define object if first col prop not defined
obj[v1] = obj[v1] , )
// get column headers
let cols = $('#raporTable tr th').map((_,e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)
/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) => ;
// define object if second col prop not defined in nested object
obj[v1][v2] = obj[v1][v2] , )
// get column headers
let cols = $('#raporTable tr th').map((_, e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)table,
th,
td
border: 1px solid black;
border-collapse: collapse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length)
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtmltable,
th,
td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>/* code for grouping */
// iterate over all rows
let res = [...document.querySelectorAll('#raporTable tr')].reduce((obj, e) =>
// get tds
let tds = e.querySelectorAll('td');
// if tds available(to exclude header roe)
if (tds.length)
// rturn object reference
return obj;
, )
// get column headers
let cols = [...document.querySelectorAll('#raporTable tr th')].map(e => e.textContent.trim())
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join()
document.getElementById('res').innerHTML = pHtmltable,
th,
td
border: 1px solid black;
border-collapse: collapse;
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) => ;
// define object if second col prop not defined in nested object
obj[v1][v2] = obj[v1][v2] , )
// get column headers
let cols = $('#raporTable tr th').map((_, e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)table,
th,
td
border: 1px solid black;
border-collapse: collapse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>/* code for grouping */
// iterate over all rows
let res = $('#raporTable tr:has(td)').get().reduce((obj, e) => ;
// define object if second col prop not defined in nested object
obj[v1][v2] = obj[v1][v2] , )
// get column headers
let cols = $('#raporTable tr th').map((_, e) => $(e).text().trim()).get()
/* Code for paragraph generation */
// iterate over first object (unique District)
let pHtml = Object.entries(res).map(([key1, value1]) =>
// iterate over nested object (unique Block)
let col3 = Object.entries(value1).map(([key2, value2]) =>
// generate string using the array and column name
return `$key2 $cols[1] $value2.join() $cols[2]`;
)
// generate string based on column
return `$cols[0] $key1, $col3.join(', ')`;
).join();
$('#res').html(pHtml)table,
th,
td
border: 1px solid black;
border-collapse: collapse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="raporTable">
<tbody>
<tr>
<th>Distirict</th>
<th>Block</th>
<th>Parcel</th>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>18</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>24</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>28</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>31</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>43</td>
</tr>
<tr>
<td>İlyas</td>
<td>209</td>
<td>41</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>40</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>36</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>14</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>7</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>21</td>
</tr>
<tr>
<td>İlyas</td>
<td>203</td>
<td>25</td>
</tr>
<tr>
<td>İlyas</td>
<td>208</td>
<td>42</td>
</tr>
<tr>
<td>İlyas</td>
<td>205</td>
<td>10</td>
</tr>
</tbody>
</table>
<p id="res"></p>answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
edited Mar 28 at 11:17
answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
answered Mar 28 at 8:46
Pranav C BalanPranav C Balan
94.4k16 gold badges101 silver badges125 bronze badges
94.4k16 gold badges101 silver badges125 bronze badges
it works well, thx.
– Barış Serkan AKIN
Mar 28 at 10:19
@BarışSerkanAKIN : glad it helped :)
– Pranav C Balan
Mar 28 at 10:20
1
@BarışSerkanAKIN Mark it answered if it had helped you then.
– David R
Mar 28 at 14:24
add a comment |
it works well, thx.
– Barış Serkan AKIN
Mar 28 at 10:19
@BarışSerkanAKIN : glad it helped :)
– Pranav C Balan
Mar 28 at 10:20
1
@BarışSerkanAKIN Mark it answered if it had helped you then.
– David R
Mar 28 at 14:24
it works well, thx.
– Barış Serkan AKIN
Mar 28 at 10:19
it works well, thx.
– Barış Serkan AKIN
Mar 28 at 10:19
@BarışSerkanAKIN : glad it helped :)
– Pranav C Balan
Mar 28 at 10:20
@BarışSerkanAKIN : glad it helped :)
– Pranav C Balan
Mar 28 at 10:20
1
1
@BarışSerkanAKIN Mark it answered if it had helped you then.
– David R
Mar 28 at 14:24
@BarışSerkanAKIN Mark it answered if it had helped you then.
– David R
Mar 28 at 14:24
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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%2f55392823%2fconvert-html-table-to-paragraph-with-grouping%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
you may sort your data in advance and take the grouped result for building the table.
– Nina Scholz
Mar 28 at 8:13
On what basis you want to group>
– Maheer Ali
Mar 28 at 8:15