文由ScriptEcho平臺提供技術(shù)支持

項目地址：傳送門

Plotly.js 動態(tài)生成 HTML 表格

應(yīng)用場景介紹

在數(shù)據(jù)分析和可視化領(lǐng)域，經(jīng)常需要以表格的形式展示數(shù)據(jù)。Plotly.js 是一款功能強大的 JavaScript 庫，不僅可以創(chuàng)建交互式圖表，還可以動態(tài)生成 HTML 表格。

代碼基本功能介紹

本代碼使用 Plotly.js 創(chuàng)建了一個動態(tài) HTML 表格，可以顯示多行多列數(shù)據(jù)。表格具有以下特點：

• 可自定義表頭和單元格內(nèi)容
• 支持設(shè)置表頭和單元格樣式，包括顏色、字體和對齊方式
• 表格可以根據(jù)數(shù)據(jù)動態(tài)更新

功能實現(xiàn)步驟及關(guān)鍵代碼分析說明

1. 導(dǎo)入 Plotly.js 庫

import Plotly from 'plotly.js-dist'

2. 定義表格數(shù)據(jù)

var values = [
  ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
  [1200000, 20000, 80000, 2000, 12120000],
  [1300000, 20000, 70000, 2000, 130902000],
  [1300000, 20000, 120000, 2000, 131222000],
  [1400000, 20000, 90000, 2000, 14102000]]

values 數(shù)組包含了表格的數(shù)據(jù)，其中第一行是表頭，其余行是數(shù)據(jù)行。

3. 定義表格樣式

var headerColor = "grey";
var rowEvenColor = "lightgrey";
var rowOddColor = "white";

這些變量用于定義表頭和單元格的樣式，包括顏色和填充顏色。

4. 創(chuàng)建 Plotly 表格對象

var data = [{
  type: 'table',
  header: {
    values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
                 ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
    align: "center",
    line: {width: 1, color: 'black'},
    fill: {color: headerColor},
    font: {family: "Arial", size: 12, color: "white"}
  },
  cells: {
    values: values,
    align: "center",
    line: {color: "black", width: 1},
    fill: {color: [[rowOddColor,rowEvenColor,rowOddColor,
                          rowEvenColor,rowOddColor]]},
    font: {family: "Arial", size: 11, color: ["black"]}
  }
}]

data 對象定義了表格的結(jié)構(gòu)和樣式。header 對象定義了表頭，cells 對象定義了單元格。

5. 繪制表格

Plotly.newPlot('myDiv', data);

Plotly.newPlot() 函數(shù)將表格繪制到指定容器中，在本例中容器的 ID 為 myDiv。

總結(jié)與展望

開發(fā)這段代碼讓我對 Plotly.js 的表格功能有了更深入的了解。我學(xué)到了如何動態(tài)生成 HTML 表格，并使用樣式對其進行自定義。

未來，該表格功能可以拓展和優(yōu)化：

• 支持表格數(shù)據(jù)的動態(tài)更新
• 添加交互功能，例如單元格排序和過濾
• 優(yōu)化表格的響應(yīng)式布局，以適應(yīng)不同屏幕尺寸
• 更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術(shù)支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

、表單：

網(wǎng)頁僅有表單才能接收用戶輸入信息、并將信息提交到服務(wù)器進行處理。

表單在網(wǎng)頁中主要負責(zé)數(shù)據(jù)采集功能。一個表單有三個基本組成部分： 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

二、制作規(guī)范的表單

<form name="表單名稱" method="提交的方式:get|post" action="處理表單的服務(wù)器地址">

一系列的表單對象

提交按鈕:<input type="submit" value="提交" name="sum" />

</form>

注意：表單必須要有提交按鈕,作用:當(dāng)點擊提交鈕時，會自動將表單中的數(shù)據(jù)提交到表單action屬性所指定的地址進行處理.

三、定義表單對象

1.使用input標(biāo)簽定義表單對象

<input type="元素類型" name="表單對象名稱" value="表單對象的值">

1.1 type的類型:

text(文本框)、password(密碼框)、checkbox(復(fù)選框)、radio(單選按鈕)

submit(提交按鈕)、reset(重置按鈕)、file(文件域)、button(按鈕)、

image(圖片域：具備提交按鈕)、hidden(隱藏域)、

date(日期控件:html5新增的)、number(數(shù)字調(diào)節(jié)器:html新增的)

2.使用select標(biāo)簽定義下拉列表

<select name="sel">

<option value="項值">項文本</option>

<option value="研究生">研究生</option>

<option value="本科">本科</option>

....

</select>

3.使用textarea定義文本域:

<textarea cols="80" rows="8">請輸入內(nèi)容</textarea>

四、常用表單對象的屬性

1.文本框:

<input type="text" name="uname" value="Admin" maxlength="最大字符數(shù):15" size="文本框長度:10" readonly="只讀:readonly"/>

2.設(shè)置單選框和復(fù)選框的默認選中

checked="checked"屬性

3.使用selected屬性設(shè)置下拉列表的選中項

<option value="本科" selected="selected">本科</option>

五、css(Cascading style sheet):級聯(lián)（層疊）樣式表。

1.作用：修飾html標(biāo)簽

2.優(yōu)勢：

內(nèi)容與表現(xiàn)分離；

網(wǎng)頁的表現(xiàn)統(tǒng)一，容易修改；

豐富的樣式，使得頁面布局更加靈活；

減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度，節(jié)省網(wǎng)絡(luò)帶寬；

運用獨立于頁面的CSS，有利于網(wǎng)頁被搜索引擎收錄。

六、在html文檔添加css樣式的方法。

1.行內(nèi)樣式：使用標(biāo)簽的style屬性添加樣式

<標(biāo)簽 style="一系列的樣式規(guī)則">

樣式規(guī)則的格式:樣式屬性:樣式屬性值;

2.內(nèi)部樣式:使用style標(biāo)簽定義樣式

<style type="text/css">

一系的樣式選擇器(選擇器必需先定義，后引用)

</style>

注意：通常情況style標(biāo)簽放在head標(biāo)簽中。

2.1基本選擇器分類：類選擇器、Id選擇器、標(biāo)簽選擇器

2.2使用類選擇器

定義類選擇器

.類選擇器名{一系列樣式}

引用類選擇器:使用標(biāo)簽的class屬性引用類選擇器名稱

2.3使用Id選擇器

定義id選擇器

#id選擇器名{一系列樣式規(guī)則}

引用ID選擇器:使用標(biāo)簽的ID屬性引用ID選擇器名稱

2.4定義標(biāo)簽選擇器

標(biāo)簽名稱{一系列樣式規(guī)則}

引用標(biāo)簽選擇器:當(dāng)使用該標(biāo)簽時自動套動標(biāo)簽樣式

3.外部樣式:

外部樣式是將一系列樣式選擇器定義在外部樣式文件（**.css）中

3.1在網(wǎng)頁使用link標(biāo)簽引用外部樣式文件

<link href="index.css" type="text/css" rel="stylesheet" />

七、樣式優(yōu)先級（就近原則）

行內(nèi)樣式>內(nèi)部樣式>外部樣式

id選擇器>類選擇器>標(biāo)簽選擇器

八、高級選擇器(復(fù)合選擇器)

1.層選選擇器

1.1后代選擇器

定義后代選擇器

選擇器1 選擇器2{一系列樣式規(guī)則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在層次關(guān)系

1.2子選擇器

定義子選擇器

選擇器1>選擇器2{一系列樣式規(guī)則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在父子關(guān)系

1.3相鄰兄弟選擇器

定義相鄰兄弟選擇器

選擇器1+選擇器2{一系列樣式規(guī)則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰的

1.4通用相鄰兄弟選擇器

定義通用相鄰兄弟選擇器

選擇器1~選擇器2{一系列樣式規(guī)則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰之后的所有兄弟

2.交集選擇器

定義交集選擇器

標(biāo)簽選擇器類選擇器|id選擇器

使用：使用標(biāo)簽的同時還引用類或者id選擇器

3.并集選擇器

定義并集選擇器

選擇器1,選擇器2

使用：使用選擇器1 或者 選擇器2 都行

九、span標(biāo)簽

文本標(biāo)簽，由內(nèi)容決定自身大小。

過昨天的學(xué)習(xí)算是對HTML有了一點點了解，知道了什么是前端，什么是HTML、前端三大標(biāo)準、主流瀏覽器和html的基本結(jié)構(gòu)及常用標(biāo)簽。那么今天繼續(xù)看看html還有什么新的知識吧。

特殊字符（了解即可）

有常見性就有特殊性，我們使用電腦時經(jīng)常會用到空格鍵，在html文檔上有時也會使用到空格鍵等等，那怎么在html上又是以什么形式展示給瀏覽器解析呢？

表格標(biāo)簽

作用：在瀏覽器上清晰美觀地顯示、展示數(shù)據(jù)。

表格標(biāo)簽的語法

<table>

<tr>

<td></td>

</tr>

</table>

表格標(biāo)簽：<table></table>，一個table標(biāo)簽中可嵌套多個tr標(biāo)簽。

行標(biāo)簽：<tr></tr>，一個tr標(biāo)簽代表一行。一個行標(biāo)簽中可以嵌套多個單元格標(biāo)簽。

單元格標(biāo)簽：<td></td>，一個td標(biāo)簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內(nèi)容。

在html中表格不是由橫線劃分行和列，而是大大小小的矩形盒子來劃分。Table是一個最大的矩形盒子，里面包含tr標(biāo)簽，這個是一個和table長度差不多的矩形盒子，table一行僅容納一個tr盒子。在tr盒子中還包含有N個td盒子，td盒子就是單元格。

表格示例：

在html文檔中編輯表格標(biāo)簽結(jié)構(gòu)時，除了一個標(biāo)簽一個標(biāo)簽地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table標(biāo)簽中輸入：“tr*5>td*3”然后敲回車，就將其表格結(jié)構(gòu)迅速展現(xiàn)出來。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性別</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

運行界面示例：默認狀態(tài)下表格是沒有線條分界，表格對齊方式左對齊。

表頭單元格標(biāo)簽

<th></th>：位于表格的第一行或第一列，可以使其內(nèi)容加粗居中顯示。

語法：

<table>

<th>

<td></td>

</th>

</table>

表頭表格代碼示例：

<h1>表頭表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面示例：

表格結(jié)構(gòu)標(biāo)簽

表格結(jié)構(gòu)標(biāo)簽分為表格頭部標(biāo)簽和表格主體標(biāo)簽。類似于head標(biāo)簽和body標(biāo)簽對于html標(biāo)簽之間的關(guān)系。

表格頭部標(biāo)簽：<thead></thead>。定義表格頭部，嵌套在<table></table>中，一般位于第一行。

表格主體標(biāo)簽：<tbody></tbody>。定義表格主體，嵌套在<table></table>中，主要用于顯示數(shù)據(jù)。

代碼示例：

<h1>表格結(jié)構(gòu)標(biāo)簽</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三豐</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

運行界面：

表格屬性

雖然表格屬性在實際開發(fā)過程中不常使用，一般都是通過CSS樣式設(shè)置，但是還是需要記住這些屬性關(guān)鍵詞，在css中屬性關(guān)鍵詞也會用到。

注：這些屬性都要寫在table標(biāo)簽的開始標(biāo)簽中，多個屬性之間需要使用空格分隔。

align：表格的對其方式。

align=“l(fā)eft”：在瀏覽器中居左顯示。也是默認顯示。

align=“center”：在瀏覽器中居中顯示。

align=“right”：在瀏覽器中居右顯示。

border：表格是否具有邊框。

border=”1”：表格添加邊框。

cellpadding：單元格內(nèi)的元素和td邊框的距離。

舉個例子，如果表格是一件教室的話，桌子就是單元格，桌子上放的書本就是單元格內(nèi)的元素，書本邊緣和桌子邊緣之間產(chǎn)生的空白區(qū)域就是cellpadding的值。

cellspacing：單元格和單元格之間的距離。默認是有空隙的，可設(shè)置為零，使其空隙清零，成為一條直線。

還是以教室為表格，桌子為單元格。桌子和桌子之間的距離就是cellspacing的值。

width：表格的寬度，屬性值可以是像素值也可以是百分比。

height：表格的高度，屬性值可以是像素值也可以是百分比。

代碼示例：

<h1>表頭表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面：

合并單元格

合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標(biāo)簽的開始標(biāo)簽上。合并代碼屬性設(shè)置后，要將沒有寫合并的單元格代碼的其他合并單元格標(biāo)簽刪除掉。

目標(biāo)單元格：（合并代碼存在位置）

跨行合并：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼。

跨列合并：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼。

合并單元格的方式：

跨行合并：將處于不同行的單元格進行合并

語法：rowspan=“合并單元格個數(shù)”

代碼示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行界面：

跨列合并：將處于不同列的單元格進行合并

語法：colspan=“合并單元格個數(shù)”

代碼示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行示例：

今天學(xué)習(xí)的表格內(nèi)容就到這里了，明天開始學(xué)習(xí)列表。