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

问题描述：

我有一个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/

那么究竟是什么问题呢？ – dreamweiver 2013-05-02 06:15:48

使用这个jquery我能够添加和删除表中的类，但不能使用添加瓷砖视图类来更改其视图。 – 2013-05-02 06:18:04

你是什么意思的平铺视图？ – Reigel 2013-05-02 06:19:07

答

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

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

相关推荐