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







share|improve this question


























  • 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

















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







share|improve this question


























  • 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













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







share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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




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

















  • 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












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 = pHtml

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>

<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>








share|improve this answer



























  • 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











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
















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 = pHtml

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>

<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>








share|improve this answer



























  • 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
















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 = pHtml

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>

<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>








share|improve this answer



























  • 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














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 = pHtml

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>

<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>








share|improve this answer















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 = pHtml

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>

<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 = pHtml

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>

<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 = pHtml

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>

<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>






share|improve this answer














share|improve this answer



share|improve this answer








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




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


















  • 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









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














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





















































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







-

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

Image
Pages using ISBN magic linksMbegu za lughaKamusiIsimu nenoKiarabukitabulughaKiswahilialfabetimaanaufafanuzimanenomuhtasarisarufividahizoalfabeti Kamusi Kutoka Wikipedia, kamusi elezo huru Jump to navigation Jump to search Kamusi za Kiswahili Kamusi ya Kiswahili-Kiswahili (kamusi wahidiya) Kamusi ya Kiswahili - Kiingereza (kamusi thania) Kamusi (kutoka neno la Kiarabu قاموس qamus ) ni kitabu ambacho kinaorodhesha maneno ya lugha yaliyokusanywa kutoka kwa watumiaji wa lugha fulani, kwa mfano lugha ya Kiswahili. Maneno hupangwa kwa mtindo wa alfabeti, hutoa maana, asili na ufafanuzi wa utumizi wa maneno na jinsi yanavyotumika au yanavyotamkwa. [1] Yaliyomo 1 Aina za kamusi 2 Muundo wa kamusi 2.1 1. Utangulizi wa kamusi 2.2 2. Matini ya kamusi 2.3 3. Sherehe ya kamusi 3 Faida za kamusi 4 Dhima ya picha katika kamusi 5 Marejeo 6 Tazama pia 7 Viungo vya nje Aina za kamusi | Kuna aina mbalimbali za kamusi ambazo n...
Read more

SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

Image
Does a multiclassed wizard start with a spellbook? Minimizing medical costs with HSA Boss has banned cycling to work because he thinks it's unsafe Is there a typical layout to blocking installed for backing in new construction framing? In the Seventh Seal why does Death let the chess game happen? Why has Novell never written its own boot loader? Should I warn my boss I might take sick leave Why is the saxophone not common in classical repertoire? Is it possible to spoof an IP address to an exact number? Motorcyle Chain needs to be cleaned every time you lube it? Bypass with wrong cvv of debit card and getting OTP Do we have a much compact and generalized version of erase–remove idiom? how can i make this execution plan more efficient? Why did moving the mouse cursor cause Windows 95 to run more quickly? What's the big deal about the Nazgûl losing their horses? Has chattel slavery ever been used as a criminal punishment in the USA since the passag...
Read more

은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현

Image
송씨은진 송씨충청남도 소재 성씨논산시 충청남도논산시은진면한국의 성씨고려송명의회덕 황씨류준고흥 류씨송유조선송준길문묘송시열좌의정문묘종묘송준길송규렴송상기송시열송인수송환기송치규송근수충청남도논산시은진면백제757년충청남도은진군논산군논산시은진면송유 은...
Read more