将HTML表格转换为具有分组的段落

时间：2019-03-28 08:11:41

标签： javascript jquery html

我有一张简单的桌子； 

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>

我需要这样一段，

District İlyas ,  203 Block 18,31,36,... parcels, 205 Block 7,14,24,.. parcels, 209 Block 41 parcels etc.

尝试将html表转换为Json对象，然后进行groupBy和strimgfy转换，但是我失败了。

首先使用纯Javascript或Jquery可以接受外部JS。

谢谢。

1 个答案:

答案 0 :(得分：3)

获取所有tr，根据列值迭代并生成一个对象。以后再使用该对象生成段落。

/* 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) {
    //get content of each column
    let v1 = tds[0].textContent.trim(),
      v2 = tds[1].textContent.trim(),
      v3 = tds[2].textContent.trim();

    // define object if first col prop not defined
    obj[v1] = obj[v1] || {};

    // define object if second col prop not defined in nested object
    obj[v1][v2] = obj[v1][v2] || [];
    // 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) {
    //get content of each column
    let v1 = tds[0].textContent.trim(),
      v2 = tds[1].textContent.trim(),
      v3 = tds[2].textContent.trim();

    // define object if first col prop not defined
    obj[v1] = obj[v1] || {};

    // define object if second col prop not defined in nested object
    obj[v1][v2] = obj[v1][v2] || [];
    // 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
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>

与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] || {};

  // define object if second col prop not defined in nested object
  obj[v1][v2] = obj[v1][v2] || [];
  // push the last column value
  obj[v1][v2].push(v3);

  // rturn object reference 
  return obj;
}, {})

// 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) => {
  // 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] || {};

  // define object if second col prop not defined in nested object
  obj[v1][v2] = obj[v1][v2] || [];
  // push the last column value
  obj[v1][v2].push(v3);

  // rturn object reference 
  return obj;
}, {})

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

相关问题
最新问题