挑战4：使用jQuery切换数据表的行列

最新推荐文章于 2024-06-26 09:43:05 发布

zeyu1021

最新推荐文章于 2024-06-26 09:43:05 发布

阅读量384

点赞数

本文链接：https://blog.youkuaiyun.com/zeyu1021/article/details/44198083

版权

本文介绍如何利用jQuery将数据表格的行列进行转换。通过一段代码展示，将初始的表格布局调整为另一种形式，提高数据展示的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

另外一道挑战题，重新排列table

把

变为：

代码如下：

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

table{
        border: 1px solid #ccc;
        font-size: 14px;
      }
       
      table th{
        background: orange;
        color: #fff;
        padding:10px;
      }
       
      table td{
        padding:10px;
      }

(function(){
        var $table = $("table");

        $table.find("tr").each(function(){
          $(this).find("td, th").each(function(index){
            $(this).appendTo($table.find("tr:eq(" + index + ")"));
          });
        });
      })(jQuery);