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

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

1 个答案: