How do i change table/grid view to tile view

Question

I have one html code, I want to change its view (from table view to tile view) using jquery. I use jquery "addclass" and "removeclass" method, I also try "wrap" and "unwrap" method for change classes.

Here is my code.

HTML (Link button click)

<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 (Table code)

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

Output (Table / Grid View)

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

Jquery Code (for add and remove class)

$(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;*/
    });
});

I want it in tile view

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

JS Fiddle

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