dynamic create table

static/table.js

@@ -0,0 +1,30 @@
+function creatTable(data){
+    //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
+    //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
+  
+    var tableData = "<table><thead><tr><th>使用者身分</th><th>使用者名稱</th><th>帳號</th><th>電子郵件</th><th>權限設定</th><th>修改密碼</th><th>備註</th><th>+新增</th></tr></thead><tbody>"
+  
+    //動態增加5個td,並且把data陣列的五個值賦給每個td
+    // for(var i=0;i < data.length;i++){
+    //     tableData += "<td>" + data[i] + "</td>"
+    // }
+    for(var i = 0; i < data.length; i++) {
+        tableData += "<tr>"
+        for(var j = 0; j < data[i].length; j++) {
+            tableData += "<td>" + data[i][j] + "</td>"
+        }
+        tableData += "</tr>";
+    }
+  
+    tableData+= "</tbody></table>"
+  
+    //現在tableData已經生成好了，把他賦值給上面的tbody
+    $("#info_table").html(tableData)
+}
+
+
+data = [['Super Admin', '超級管理員', 'Admin', 'admin@gmail.com', '設定', '修改', '', '新增']]
+// 之後透過 fetch 取得fastapi後端資料!
+creatTable(data);
+console.log('Table data 寫入!');
+

templates/index.html

@@ -49,6 +49,7 @@
 
       </div>
       <script type="text/javascript" src="static/index.js"></script>
+      <script type="text/javascript" src="static/table.js"></script>
     </body>
 
 </html>

templates/system.html

@@ -14,15 +14,6 @@
 
     </div>
     <div id="info_table">
-        <table>
-            <th>使用者身分</th>
-            <th>使用者名稱</th>
-            <th>帳號</th>
-            <th>電子郵件</th>
-            <th>權限設定</th>
-            <th>修改密碼</th>
-            <th>備註</th>
-            <th>+新增</th>
-        </table>
+        
     </div>
 {% endblock %}