JavaScript的動態生成表格怎么寫？

種動態創建元素的區別

document.write()
element.innerHTML
document.createElement()

區別

1.document.write是直接將內容寫入頁面的內容流，但是文檔流執行完畢，則它會導致頁面全部重繪

2.innerHTML是將內容寫入某個DOM節點，不會導致頁面全部重繪

3.innerHTML創建多個元素效率更高（不要拼接字符串，采取數組形式拼接），結構稍微復雜（innerHTML采取數組形式拼接會快一點比createElement（）快）

4.createElement()創建多個元素效率稍低一點點，但是結構更清晰

總結:不同瀏覽器下，innerHTML效率要比creatElement高

動態生成表格案例分析

因為里面的學生數據都是動態的，我們需要js動態生成。這里我們模擬數據，自己定義好數據。數據我們采取對象形式存儲。

2.所有的數據都是放到tbody里面的行里面。

3.因為行很多，我們需要循環創建多個行（對應多少人）

源碼如下

效果圖如下

數據密集型文檔和網頁中，復雜表格結構是必不可少的。它們幫助用戶理解大量的信息和數據關系。本文將詳細介紹復雜表格的設計要點，提供實用的例子，并展示如何使用HTML代碼來創建這些表格。

復雜表格的設計要點

1. 清晰的層次結構

復雜表格應該有明確的層次結構，以便用戶可以輕松地從總體到細節地閱讀信息。這通常通過使用標題行和列來實現。

2. 一致的對齊

數據應該根據其類型進行對齊，例如，數字通常右對齊以便于比較，而文本則左對齊。

3. 合理的分隔

使用邊框和底色來區分不同的行和列，以增強可讀性。

4. 簡潔的標注

對于包含復雜數據的表格，應該提供清晰的標注和腳注，以便用戶理解數據的來源和含義。

表格實例與HTML代碼

實例 1: 帶有合并單元格的表格

這個表格顯示了一個團隊成員在上半年和下半年的表現評估。

<table border="1">
  <thead>
    <tr>
      <th rowspan="2">成員</th>
      <th colspan="2">上半年</th>
      <th colspan="2">下半年</th>
    </tr>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
      <th>項目1</th>
      <th>項目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>良好</td>
      <td>優秀</td>
      <td>優秀</td>
      <td>良好</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>合格</td>
      <td>良好</td>
      <td>良好</td>
      <td>優秀</td>
    </tr>
  </tbody>
</table>

實例 2: 帶有子標題的復雜表格

這個表格顯示了一個公司季度財務報告的簡化版本。

<table border="1">
  <thead>
    <tr>
      <th></th>
      <th>Q1</th>
      <th></th>
      <th>Q2</th>
      <th></th>
      <th>Q3</th>
      <th></th>
      <th>Q4</th>
      <th></th>
    </tr>
    <tr>
      <th>財務報告</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020年</td>
      <td>50</td>
      <td>30</td>
      <td>70</td>
      <td>40</td>
      <td>60</td>
      <td>50</td>
      <td>80</td>
      <td>60</td>
    </tr>
    <tr>
      <td>2021年</td>
      <td>55</td>
      <td>35</td>
      <td>75</td>
      <td>45</td>
      <td>65</td>
      <td>55</td>
      <td>85</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

實例 3: 具有行跨度的表格

這個表格展示了不同設備對于特定功能的支持程度。

<table border="1">
  <thead>
    <tr>
      <th>功能</th>
      <th>支持的設備</th>
      <th>兼容性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">視頻播放</td>
      <td>手機</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>高</td>
    </tr>
    <tr>
      <td>電腦</td>
      <td>中</td>
    </tr>
    <tr>
      <td rowspan="2">音頻播放</td>
      <td>手機</td>
      <td>高</td>
    </tr>
    <tr>
      <td>智能音箱</td>
      <td>高</td>
    </tr>
    <tr>
      <td rowspan="2">文檔編輯</td>
      <td>電腦</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>中</td>
    </tr>
  </tbody>
</table>

最佳實踐

簡化設計：避免使用過多的裝飾性元素，如陰影或漸變。
數據可比性：確保相似性質的數據在表格中是可比較的。
注釋和說明：在表格下方提供必要的注釋和數據來源說明。
測試：在不同的設備和屏幕尺寸上測試表格的顯示效果。

復雜表格結構是展示和理解多維數據的強大工具。通過遵循上述設計原則和實例，你可以創建清晰、有效的表格來提高你的數據呈現能力。

序列表和有序列表

用于呈現邏輯上并列的具有相關性的數據內容.

<ul>
<li></li>
</ul>

ul元素可以用type屬性設置不同的列表標記:

disc: 實心圓點

circle: 空心圓圈

square: 實心正方形

<ol>
<li></li>
</ol>

ol元素也可以設置不同的標記:

1: 阿拉伯數字

i: 小寫羅馬數字

I: 大寫羅馬數字

A: 大寫字母

a: 小寫字母

定義列表

適用呈現包含主題及描述的數據內容.

<dl>
<dt>主題</dt>
<dd>描述</dd>
</dl>

表格

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

thead: 表頭

tbody: 表體

tfoot: 表腳

th: 專用于表頭中的單元格, 其具有自動加粗并且居中的效果.

表格的屬性控制:

border: 邊框

bordercolor: 邊框顏色

width: 寬度

height: 高度

cellspacing: 單元格間距(外)

cellpadding: 單元格填充(內)

align: 表格的位置控制

單元格的屬性控制:

align

valign

如何合并單元格/跨行或跨列?

注意: 合并后, 會引發單元格數量的減少!

列表練習案例源碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的電腦文件列表</h1>
<ul>
<li>我的電腦
<ul>
<li>本地磁盤(C:)
<ul>
<li>我的文檔</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盤(D:)
<ul>
<li>我的游戲</li>
<li>我的資料</li>
<li>我的電影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

在線咨詢

上一篇：蘋果蘋方字體
下一篇：PHP 頁面跳轉到另一個頁面的幾種方法分享

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript的動態生成表格怎么寫？