1

jquery を使用して、そのビューを (テーブル ビューからタイル ビューに) 変更したい 1 つの HTML コードがあります。私は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/

4

1 に答える 1

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:

作業コード

于 2013-05-03T10:36:43.337 に答える