mechanical/static/table.js

function creatTable(data){
    //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
    //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
    alert("eee");
    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>"
        tableData += "<td>" + data[i].roleType + "</td>" +
                     "<td>" + data[i].username + "</td>" +
                     "<td></td>" +           
                     "<td></td>" +
                     "<td><button>設定</button></td>" +
                     "<td><button>修改密碼</button></td>" +
                     "<td></td>" +
                     "<td></td>" ;
        tableData += "</tr>";
    }
  
    tableData+= "</tbody></table>"
  
    //現在tableData已經生成好了，把他賦值給上面的tbody
    $("#info_table").html(tableData)
}

//alert("response");

// 之後透過 fetch 取得fastapi後端資料!
var xhr = new XMLHttpRequest();
var url = "member";
obj="";
xhr.open("GET",url);
xhr.onload = function(){
    obj = JSON.parse(xhr.responseText);
        //insertHTML();
    alert(obj);
};
xhr.send();
creatTable(obj);
console.log('Table data 寫入!');