HTML表格通常以行为主,但有时您可能需要将其翻转,以便以列为主。这篇文章将介绍如何使用JavaScript和jQuery来实现这一目标。
简单的HTML表格
首先,我们来创建一个简单的HTML表格,其中包含三个行和三个列:
------- ---- ---------- ---------- ---------- ----- ---- ---------- ---------- ---------- ----- ---- ---------- ---------- ---------- ----- --------
使用 JavaScript 翻转行和列
要翻转表格,我们需要在 HTML 中添加一个空元素来容纳翻转后的表格。然后,使用JavaScript遍历原始表格并将数据存储到新表格中。以下是代码:
------ ------------------- ---- ---------- ---------- ---------- ----- ---- ---------- ---------- ---------- ----- ---- ---------- ---------- ---------- ----- -------- ------ ----------------------------- -------- -- ------------ --- ------------- - ----------------------------------------- --- ---- - -------------------------- --- ---- - ----------------------------------- -- ------- --- --------------- - ------------------------------------------- --- ---- - - -- - - ----- ---- - --- --- - ----------------------------- --- ---- - - -- - - ----- ---- - --- ---- - ------------------ -------------- - ----------------------------------------- - - -- ------ ---------------------------------------------------- ---------
在这个例子中,我们首先获取了原始表格的行数和列数,然后创建一个新表格。接下来,我们使用嵌套的循环遍历原始表格,并将每个单元格的内容复制到新表格中。最后,我们删除原始表格。
使用 jQuery 翻转行和列
如果您正在使用jQuery,则可以使用以下代码来翻转表格:
------ ------------------- ---- ---------- ---------- ---------- ----- ---- ---------- ---------- ---------- ----- ---- ---------- ---------- ---------- ----- -------- ------ ----------------------------- ------- ----------------------------------------------------------- -------- -- ------------ --- ---- - ----------------- ------------ --- ---- - ----------------- -------------- ------------ -- ----------------- --- --------------- - --------------------- --- ---- - - -- - - ----- ---- - --- --- - --------------- --- ---- - - -- - - ----- ---- - --- ---- - ------------------------------------- -------------- - ----- - -- -------------- - ----- - ------------- ----------------- - ---------------------------- - --------------------------------------------------- -- ------ ----------------------------- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------