Comment utiliser jquer pour échanger les lignes et les colonnes d'un tableau

Cette fois, je vais vous montrer comment utiliser jquer pour échanger des lignes et des colonnes de tableau. Quelles sont les précautions pour utiliser jquer pour réaliser l'échange de lignes et de colonnes de tableau. Voici des cas pratiques, jetons un coup d'œil. .

Le code spécifique est le suivant :

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


  <title>jQuery行列转置</title>
  <script></script>
  <style>
    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>
    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>


  

                                                                                                  

列1	列2	列3	列4
数据1-1	数据1-2	数据1-3	数据1-4
数据2-1	数据2-2	数据2-3	数据2-4
数据3-1	数据3-2	数据3-3	数据3-4

  

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes. , veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

JQuery exploite la position de tr dans le tableau

sélection de la case à cocher jQuery et obtient la valeur

Comment implémenter Jquery ajax asynchrone cross-domain

Comment imprimer le contenu d'une page avec le plug-in jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!