如何在 HTML 表格中翻转(转置)行和列?

HTML表格通常以行为主,但有时您可能需要将其翻转,以便以列为主。这篇文章将介绍如何使用JavaScript和jQuery来实现这一目标。

简单的HTML表格

首先,我们来创建一个简单的HTML表格,其中包含三个行和三个列:

-------
   ----
      ----------
      ----------
      ----------
   -----
   ----
      ----------
      ----------
      ----------
   -----
   ----
      ----------
      ----------
      ----------
   -----
--------

使用 JavaScript 翻转行和列

要翻转表格,我们需要在 HTML 中添加一个空元素来容纳翻转后的表格。然后,使用JavaScript遍历原始表格并将数据存储到新表格中。以下是代码:

------ -------------------
   ----
      ----------
      ----------
      ----------
   -----
   ----
      ----------
      ----------
      ----------
   -----
   ----
      ----------
      ----------
      ----------
   -----
--------

------ -----------------------------

--------
   -- ------------
   --- ------------- - -----------------------------------------
   --- ---- - --------------------------
   --- ---- - -----------------------------------

   -- -------
   --- --------------- - -------------------------------------------
   --- ---- - - -- - - ----- ---- -
      --- --- - -----------------------------
      --- ---- - - -- - - ----- ---- -
         --- ---- - ------------------
         -------------- - -----------------------------------------
      -
   -

   -- ------
   ----------------------------------------------------
---------

在这个例子中,我们首先获取了原始表格的行数和列数,然后创建一个新表格。接下来,我们使用嵌套的循环遍历原始表格,并将每个单元格的内容复制到新表格中。最后,我们删除原始表格。

使用 jQuery 翻转行和列

如果您正在使用jQuery,则可以使用以下代码来翻转表格:

------ -------------------
   ----
      ----------
      ----------
      ----------
   -----
   ----
      ----------
      ----------
      ----------
   -----
   ----
      ----------
      ----------
      ----------
   -----
--------

------ -----------------------------

------- -----------------------------------------------------------
--------
   -- ------------
   --- ---- - ----------------- ------------
   --- ---- - ----------------- -------------- ------------

   -- -----------------
   --- --------------- - ---------------------
   --- ---- - - -- - - ----- ---- -
      --- --- - ---------------
      --- ---- - - -- - - ----- ---- -
         --- ---- - ------------------------------------- -------------- - ----- - -- -------------- - ----- - -------------
         -----------------
      -
      ----------------------------
   -
   ---------------------------------------------------

   -- ------
   -----------------------------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------