首頁 >web前端 >js教程 >使用jQuery+CSS如何實作table表格

使用jQuery+CSS如何實作table表格

亚连原創: 2018-06-13 10:15:541842瀏覽

這篇文章主要介紹了jQuery CSS實現的table表格行列轉置功能,涉及jQuery事件響應及頁面元素屬性動態操作相關實現技巧,需要的朋友可以參考下

本文實例講述了jQuery CSS實現的table表格行列轉置功能。分享給大家供大家參考，具體如下：

先來看看運行效果：

具體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>www.jb51.net jQuery行列转置</title>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <style type="text/css">
    table
    {
      border: 1px solid #ccc;
      font-size: 14px;
    }
    table th
    {
      background: orange;
      color: #fff;
      padding: 10px;
    }
    table td
    {
      padding: 10px;
    }
    table.vertical
    {
      -webkit-writing-mode: vertical-lr;
      -moz-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
    }
    table.vertical th, table.vertical td
    {
      width: 100px;
      height: 14px;
    }
    table.vertical p
    {
      width: 100px;
      -webkit-writing-mode: horizontal-tb;
      -moz-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
    }
  </style>
  <script type="text/javascript">
    var flag = false;
    //注：多次点击后，内面文字会包裹多层p，尚无好的解决方法
    function test(){
      if(!flag){
        $(&#39;table&#39;).addClass(&#39;vertical&#39;).find(&#39;th, td&#39;).wrapInner(&#39;<p>&#39;);
        //$(&#39;table&#39;).addClass(&#39;vertical&#39;);//数字会变垂直，不能用
      }else{
        $(&#39;table&#39;).removeClass(&#39;vertical&#39;);
      }
      flag=!flag;
    }
  </script>
</head>
<body>
  <table>
   <tr>
   <th>列1</th>
   <th>列2</th>
   <th>列3</th>
   <th>列4</th>
   </tr>
   <tr>
   <td>数据1-1</td>
   <td>数据1-2</td>
   <td>数据1-3</td>
   <td>数据1-4</td>
   </tr>
   <tr>
   <td>数据2-1</td>
   <td>数据2-2</td>
   <td>数据2-3</td>
   <td>数据2-4</td>
   </tr>
   <tr>
   <td>数据3-1</td>
   <td>数据3-2</td>
   <td>数据3-3</td>
   <td>数据3-4</td>
   </tr>
  </table>
  <input type="button" onclick="test()" value="行列转置" />
</body>
</html>

上面是我整理給大家的，希望今後對大家有幫助。

使用casperjs和resemble.js如何實作像素對比（詳細教學）

##使用js實作推箱子小遊戲（詳細教學）

使用JavaScript如何實現快速排序（詳細教學）

關於vue中如何實作二級連動預設選取第一個值

在AngularJS中使用ui-route實作多層巢狀路由（詳細教學）#

以上是使用jQuery+CSS如何實作table表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css 快速排序 JS 事件 table ui

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：透過nodejs使用http模組發送請求（詳細教學）下一篇：透過nodejs使用http模組發送請求（詳細教學）

看更多