집 > 기사 > 웹 프론트엔드 > jQuery+CSS를 사용하여 테이블을 구현하는 방법

jQuery+CSS를 사용하여 테이블을 구현하는 방법

亚连원래의: 2018-06-13 10:15:541770검색

이 글에서는 주로 jQuery+CSS로 구현한 테이블 행 및 열 전치 기능을 소개하며, jQuery 이벤트 응답 및 페이지 요소 속성의 동적 연산과 관련된 구현 기술이 필요하면 참고할 수 있습니다.

이 글의 예는 다음과 같습니다. jQuery+CSS 테이블 테이블 행 및 열 전치 기능 구현. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

실행 효과를 먼저 살펴보겠습니다.

구체적인 코드는 다음과 같습니다.

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

위는 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

jQuery+CSS를 사용하여 테이블을 구현하는 방법

관련 기사