使用 Alpine JS 建立動態表

我們使用包含城市名稱和各種服裝的範例資料來示範了該表的功能。

補充筆記：

外部連結

結論：

此細分展示了 Alpine JS 如何幫助我們創建具有靈活頁眉、正文和頁腳的動態表格。這種方法簡化了表的創建和管理，特別是對於資料頻繁變化的場景。

首頁 > 程式設計 > 使用 Alpine JS 建立動態表

使用 Alpine JS 建立動態表

發佈於2024-08-07

Dynamic Table Creation with Alpine JS

本文探討了使用輕量級 JavaScript 架構 Alpine JS 建立動態表。我們將把這個過程分為三個部分：頁首、正文和頁腳，重點放在基本場景和複雜場景。

配置：

HTML 結構： 我們從附加了 x-data 指令的基本 HTML 元素 () 開始。該指令將反應資料綁定到元素。
JavaScript 資料： 我們在 HTML 之外定義一個空的 JavaScript 物件（資料）來保存我們的表格資料。

初始代碼如下：

標頭

我們使用 thead 元素作為標題。
x-for 指令迭代 table.customHeader 數據，動態建立行和列。
複雜標題可以利用 colspan 和 rowspan 屬性（在 col.attr 中定義）來合併單元格。
每個單元格內的內容使用 x-html 顯示並綁定到 col.title 屬性。

let data = {
  table: {
      customHeader: [
          [
              { title: 'City', attr: { rowspan: 2 }, class: 'border-r border-t' },
              { title: 'Clothes', attr: { colspan: 3 }, class: 'border-r border-t' },
              { title: 'Accessories', attr: { colspan: 2 }, class: 'border-t' }
          ],
          [
              { title: 'Trousers', class: 'border-r' },
              { title: 'Skirts', class: 'border-r' },
              { title: 'Dresses', class: 'border-r' },
              { title: 'Bracelets', class: 'border-r' },
              { title: 'Rings' },
          ]
      ],
  }
}

身體

tbody 元素保存表格的資料行。
我們使用 x-for 來迭代 table.data。

每行包含使用 x 文字填入對應物件屬性資料的儲存格 ()。

這就是我們要顯示的數據：

data: [
    { "city": "Mandalay", "trousers": 79, "skirts": 16, "dresses": 14, "bracelets": 69, "rings": 99 },
    { "city": "George Town", "trousers": 68, "skirts": 24, "dresses": 90, "bracelets": 96, "rings": 48 },
    { "city": "Gent", "trousers": 26, "skirts": 60, "dresses": 67, "bracelets": 5, "rings": 43 },
    { "city": "Mombasa", "trousers": 34, "skirts": 62, "dresses": 18, "bracelets": 75, "rings": 78 },
    { "city": "Lyon", "trousers": 13, "skirts": 33, "dresses": 12, "bracelets": 0, "rings": 17 },
    { "city": "Vancouver", "trousers": 82, "skirts": 91, "dresses": 18, "bracelets": 96, "rings": 72 },
    { "city": "Cairn", "trousers": 64, "skirts": 43, "dresses": 14, "bracelets": 95, "rings": 55 },
]

頁尾

tfoot 元素定義頁尾。
與header類似，它使用x-for來迭代table.customFooter資料。
但是，頁腳可以透過使用 x-html 來引用 table.footerData 中的屬性來顯示動態值。

customFooter: [
    [
        { value: 'Total', class: 'font-bold border-r text-center', attr: { rowspan: 2 } },
        { name: 'total-trousers', class: 'text-right border-r' },
        { name: 'total-skirts', class: 'text-right border-r', },
        { name: 'total-dresses', class: 'text-right border-r' },
        { name: 'total-bracelets', class: 'text-right border-r' },
        { name: 'total-rings', class: 'text-right' },
    ],
    [
        { name: 'total-clothes', class: 'text-center border-r', attr: { colspan: 3 } },
        { name: 'total-accessories', class: 'text-center', attr: { colspan: 2 } },
    ],
],

範例資料：

我們使用包含城市名稱和各種服裝的範例資料來示範了該表的功能。

補充筆記：

樣式是使用 col.class 和 data.class 屬性中定義的 CSS 類別來實現的。
提供的連結提供了完整的工作演示以供進一步探索。

外部連結

示範： https://framework.fuwafuwa.web.id/examples/simple-table
說明： https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

結論：

此細分展示了 Alpine JS 如何幫助我們創建具有靈活頁眉、正文和頁腳的動態表格。這種方法簡化了表的創建和管理，特別是對於資料頻繁變化的場景。

版本聲明本文轉載於：https://dev.to/aazwar/dynamic-table-creation-with-alpine-js-2ha4?1如有侵犯，請聯絡[email protected]刪除

最新教學更多>

如何高效地在一個事務中插入數據到多個MySQL表？
mySQL插入到多個表中，該數據可能會產生意外的結果。雖然似乎有多個查詢可以解決問題，但將從用戶表的自動信息ID與配置文件表的手動用戶ID相關聯提出了挑戰。使用Transactions和last_insert_id（）插入用戶（用戶名，密碼）值（'test'，'tes...

程式設計發佈於2025-05-22
如何使用PHP將斑點（圖像）正確插入MySQL？
essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call fil...

程式設計發佈於2025-05-22
如何從PHP中的數組中提取隨機元素？
從陣列中的隨機選擇，可以輕鬆從數組中獲取隨機項目。考慮以下數組：; 從此數組中檢索一個隨機項目，利用array_rand（ array_rand（）函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵，我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。

程式設計發佈於2025-05-22
PHP未來：適應與創新
PHP的未來將通過適應新技術趨勢和引入創新特性來實現：1)適應云計算、容器化和微服務架構，支持Docker和Kubernetes；2)引入JIT編譯器和枚舉類型，提升性能和數據處理效率；3)持續優化性能和推廣最佳實踐。引言在編程世界中，PHP一直是網頁開發的中流砥柱。作為一個從1994年就開始發展...

程式設計發佈於2025-05-22
Python環境變量的訪問與管理方法
Accessing Environment Variables in PythonTo access environment variables in Python, utilize the os.environ object, which represents a mapping of envir...

程式設計發佈於2025-05-22
同實例無需轉儲複製MySQL數據庫方法
在同一實例上複製一個MySQL數據庫而無需轉儲在同一mySQL實例上複製數據庫，而無需創建InterMediate sqql script。以下方法為傳統的轉儲和IMPORT過程提供了更簡單的替代方法。直接管道數據 MySQL手動概述了一種允許將mysqldump直接輸出到MySQL cli...

程式設計發佈於2025-05-22
如何使用PHP從XML文件中有效地檢索屬性值？
從php $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $attributeName => $attributeValue) { echo $attributeName,...

程式設計發佈於2025-05-22
$如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤？$
如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤？
Unveiling the Mystery: Content Security Policy Directive ErrorsEncountering the enigmatic error "Refused to load the script..." when deployi...

程式設計發佈於2025-05-22
Go web應用何時關閉數據庫連接？
在GO Web Applications中管理數據庫連接很少，考慮以下簡化的web應用程序代碼：出現的問題：何時應在DB連接上調用Close（）方法？，該特定方案將自動關閉程序時，該程序將在EXITS EXITS EXITS出現時自動關閉。但是，其他考慮因素可能保證手動處理。選項1：隱式關閉終...

程式設計發佈於2025-05-22
Python不會對超範圍子串切片報錯的原因
在python中用索引切片範圍：二重性和空序列索引單個元素不同，該元素會引起錯誤，切片在序列的邊界之外沒有。這種行為源於索引和切片之間的基本差異。索引一個序列，例如“示例” [3]，返回一個項目。但是，切片序列（例如“示例” [3：4]）返回項目的子序列。索引不存在的元素時，例如“示例” [9...

程式設計發佈於2025-05-22
為什麼PHP的DateTime :: Modify（'+1個月'）會產生意外的結果？
使用php dateTime修改月份：發現預期的行為在使用PHP的DateTime類時，添加或減去幾個月可能並不總是會產生預期的結果。正如文檔所警告的那樣，“當心”這些操作的“不像看起來那樣直觀。考慮文檔中給出的示例：這是內部發生的事情：現在在3月3日添加另一個月，因為2月在2001年只有2...

程式設計發佈於2025-05-22
在Oracle SQL中如何提取下劃線前的子字符串？
[ 在oracle sql 解決方案： Explanation:SUBSTR function extracts a substring starting from the specified position (0) and continuing for a specified length.IN...

程式設計發佈於2025-05-22
如何在鼠標單擊時編程選擇DIV中的所有文本？
在鼠標上選擇div文本單擊帶有文本內容，用戶如何使用單個鼠標單擊單擊div中的整個文本？這允許用戶輕鬆拖放所選的文本或直接複製它。在單個鼠標上單擊的div元素中選擇文本，您可以使用以下Javascript函數： function selecttext（canduterid）{ if（d...

程式設計發佈於2025-05-22
將圖片浮動到底部右側並環繞文字的技巧
在Web設計中圍繞在Web設計中，有時可以將圖像浮動到頁面右下角，從而使文本圍繞它纏繞。這可以在有效地展示圖像的同時創建一個吸引人的視覺效果。 css位置在右下角，使用css float and clear properties： img { 浮點：對； ...

程式設計發佈於2025-05-22
eval（）vs. ast.literal_eval（）：對於用戶輸入，哪個Python函數更安全？
稱量（）和ast.literal_eval（）中的Python Security 在使用用戶輸入時，必須優先確保安全性。強大的Python功能Eval（）通常是作為潛在解決方案而出現的，但擔心其潛在風險。 This article delves into the differences betwee...

程式設計發佈於2025-05-22