如何将表格/网格视图更改为平铺视图

Question

我有一个 html 代码，我想使用 jquery 更改它的视图（从表格视图到平铺视图）。 我使用 jquery "addclass" 和 "removeclass" 方法，我也尝试使用 "wrap" 和 "unwrap" 方法来更改类。

这是我的代码。

HTML（链接按钮点击）

<a href="#" id="button"> <img src="images/icon_roleview3.png" onmouseover="this.src='images/icon_roleview3_hover.png'" onmouseout="this.src='images/icon_roleview3.png'"></a>

HTML（表格代码）

<div class="rolesboxstart">
    <div class="overflowscroll">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle" style="overflow-x: scroll;" id = "tablestyle">
      <tr id = "tabletr">
        <td width="22%" class="tableviewtop">title1</td>
        <td width="12%" class="tableviewtop textaligncenter">title2</td>
        <td width="14%" class="tableviewtop textaligncenter">title3</td>
        <td width="6%" class="tableviewtop textaligncenter">title4</td>
      </tr>
      <tr>
        <td><a href="#"">data1</a></td>
        <td class="textaligncenter">data2</td>
        <td class="textaligncenter">data3</td>
        <td class="textaligncenter">data4</td>
      </tr>
      <tr>
        <td><a href="#"">data1</a></td>
        <td class="textaligncenter">data2</td>
        <td class="textaligncenter">data3</td>
        <td class="textaligncenter">data4</td>
      </tr>
    </table>
    </div>
</div>

输出（表格/网格视图）

 ---------------------------------------------------
| **title1** | **title2** | **title3** | **title4** |
 ---------------------------------------------------
|   data1    |    data2   |     data3  |     data4  |
 ---------------------------------------------------
|   data1    |    data2   |     data3  |     data4  |
 ---------------------------------------------------

Jquery 代码（用于添加和删除类）

$(function() {
     $( "#button" ).click(function() {
        $("#tablestyle").removeClass("tablestyle tableviewtop textaligncenter");
        document.getElementById('tabletr').style.display='none'; // hide table data
        $("#tablestyle").addClass("rolesbox");
        $(".textaligncenter").addClass("title");
        $("#tabletr").addClass("content");
        /*console.log("unwrap classes");
        $('table').contents().unwrap();// remove (unwrap) talbe view classes
        console.log("wrap new classes");
        $('.tableviewtop').wrap('<div class="title" />');
        console.log("done");
        return false;*/
    });
});

我希望它在平铺视图中

   __________             ___________          ______________
  |          |           |           |        |              |
  |          |           |           |        |              |
  |__________|           |___________|        |______________|

JS 小提琴

http://jsfiddle.net/tutorialdrive/Xxqq5/

Answer 1

CSS：

.tiled { float: left; margin: 7.5px; background: #B50000; } 

JS：

$(function() {
     $( "#button" ).click(function() {
        $("#tablestyle").removeClass("tablestyle tableviewtop textaligncenter");
        document.getElementById('tabletr').style.display='none';
        $("#tablestyle").addClass("rolesbox");
        //$(".textaligncenter").addClass("title");
         $(".tile td").addClass("title");
         $(".tile").addClass("tiled");
        $("#tabletr").addClass("content");

    });
});

JSFiddle：

Working code