将表格转换为 html 并分组为 div

Question

更新：快完成了！ 问题是我试图分组的产品行被分为两组： https : //jsfiddle.net/g3zrh5y5/1/

我有一个 HTML 表，我想将其转换并分组为 div。 我没有在我网站上的另一个桌子上成功地使用 tableanarchy.js ( http://codepen.io/KurtWM/pen/AJpEw )，但在这张桌子上的设置有点不同，我无法让它工作。

我需要删除分隔表行，并将其余的分组在 div 中，如示例所示。 知道我怎么做吗？

 <tbody>
  <tr>
    <td class="unfoldedlabel" colspan="6"><a href="javascript://" name=
    "_ec_pd6_cc/cL" id="_ec_pd6_cc/cL" onclick=
    "if( UI.pb_boolean(this, 'click') ) {} return false;">Backup/datalagring/Raid
    Controllers</a></td>
  </tr>

   //group this ---->
  <tr>
    <td rowspan="2"><a href=
    "">
    <img src="/imgs" alt="" /></a></td>

    <td colspan="3"><a href=
    "">
    HP Flash Backed Write Cache - RAID controller cache memory (1GB)</a></td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>534562-B21</td>

    <td>HP</td>

    <td>0</td>

    <td>4&nbsp;127,97SEK</td>

    <td><input type="button" id="rpb13804" class="actionbutton" value="K&Ouml;P NU"
    onclick="buy(this, 13804, null, null,null, '/ajax/buy')" /></td>
  </tr>
 //end group ---->

 //remove this ---->
  <tr>
    <td class="divider" colspan="6"></td>
  </tr>
  //end remove ---->

 //group this ---->
  <tr>
    <td rowspan="2"><a href=
    "">
    <img src="/imgs/9248a5f8-1a45-40c1-b254-52ab24881150/40/40" alt="" /></a></td>

    <td colspan="3"><a href=
    "">
    HP Flash Backed Write Cache - RAID controller cache memory (512MB) - for ProLiant
    BL460c G7, BL620C G7, BL680c G7, DL165 G7, DL360 G7, DL370 G6, DL980 G7, ML110
    G7</a></td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>534916-B21</td>

    <td>HP</td>

    <td>0</td>

    <td>3&nbsp;260,99SEK</td>

    <td><input type="button" id="rpb28314" class="actionbutton" value="K&Ouml;P NU"
    onclick="buy(this, 28314, null, null,null, '/ajax/buy')" /></td>
  </tr>
//end group ---->

</tbody>

Answer 1

只需迭代表行并排除您不需要的行。 这是一个工作小提琴

 $(document).ready(function(){ $('.group-btn').click(function(){ // Lets create the main div var div = $('<div />', {id: '#myDiv', class: 'new-div'}); // Let's start iterating the body rows $('.myTable tbody tr').each(function(index, row) { // Exclude divider rows if(!$(row).hasClass('divider')) { // Let's iterate the columns of the row $(row).find('td').each(function(index, column){ // This is a simple example that extract the column text that's why i create a simple <p> tag // Let's exclude tds that have "exclude" class if(!$(column).hasClass('exclude')) { var paragraph = $(column).html(); $(div).append(paragraph).append('<br/>'); } }); } }); // And finally we append the div to the "append-here" div $('.append-here').append(div) }); });

 table { border: 1px solid black } table tr td{ border: 1px solid black }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" class="group-btn">Click me!</button> <table class="myTable"> <thead> <tr> <th>col 1-1</th> <th>col 2-1</th> <th>col 3-1</th> </tr> </thead> <tbody> <tr> <td>Val 1-2</td> <td class="exclude">Val 2-2</td> <td>Val 3-2</td> </tr> <tr> <td>Val 1-3</td> <td>Val 2-3</td> <td class="exclude">Val 3-3</td> </tr> <tr class="divider"> <td colspan="3">DIVIDER</td> </tr> <tr> <td>Val 1-5</td> <td>Val 2-5</td> <td>Val 3-5</td> </tr> </tbody> </table> <div class="append-here"> <p>Here is where you append the divs</p> </div>

我做了一点改变：“divider”类在tr而不是在td

* 更新 *

我已经添加了这行代码

if(!$(column).hasClass('exclude')) {
    var paragraph = $(column).html();
    $(div).append(paragraph).append('<br/>');
}

这允许您检查您需要检查的任何类以包含/排除td s 元素