mechanical/static/table.js

data="";
function creatTable(){
    //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
    //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
    //alert("eee");
    var tableData = "<table><thead><tr><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>";
        str = "";
        str2="";
        if(data[i].roleType==1){
            str = "第一層(集團)";
        }
        else if(data[i].roleType==2){
            str = "第二層(公司)";
        }
        else if(data[i].roleType==3){
            str = "第三層(廠區)";
        }
        else{
            str = "第四層(課)";
        }

        if(data[i].isAdmin==1){
            str2 = data[i].role_name;
        }
        else{
            str2 = "檢視者";
        }

        
        tableData += "<td>" + str + "</td>" +
                     "<td>" + str2 + "</td>" +
                     "<td>" + data[i].username + "</td>" +
                     "<td></td>" +           
                     "<td><button onclick=\"member_auth(\'"+data[i].username+"\');\">設定</button></td>" +
                     "<td></td>" +
                     "<td></td>" ;
        tableData += "</tr>";
    }
  
    tableData+= "</tbody></table>";
  
    //現在tableData已經生成好了，把他賦值給上面的tbody
    $("#info_table").html(tableData);
}

function member_auth(username){
    $("#info_table").html("");
    inner = "<p>請設定以下權限:</p><br>";
    inner += "<table id = \"change\"> <tr> <th>帳號</th><th>管理員</th><th>可用</th></tr>" +
             " <tr><td >" + username + "</td><td><input type=\"checkbox\" id=\"isAdmin\" >"+ " </td><td><input type=\"checkbox\" id=\"isEnable\" ></td></tr></table>";

    inner += "<br><button onclick=\"put();\">確認 </button>" + "<button onclick=\"start();\">取消 </button>"
    $("#member_auth").html(inner);
    console.log($("#isAdmin").prop('checked'));

}

function put(){
    var xhr2 = new XMLHttpRequest();
    var url2 = "member/edit/?name=" + document.getElementById("change").rows[1].cells[0].innerHTML;
    if($("#isAdmin").prop('checked')){
        url2 += "&isAdmin=1" ; 
    }
    else{
        url2 += "&isAdmin=0" ; 
    }
    if($("#isEnable").prop('checked')){
        url2 += "&isEnable=1" ; 
    }
    else{
        url2 += "&isEnable=0" ; 
    }
    xhr2.open("GET",url2);
    xhr2.onload = function(){
        obj = JSON.parse(xhr2.responseText);
        alert(obj[0].msg);
        start();
        $("#member_auth").html("");
        
        //insertHTML();
    };
    xhr2.send();
}

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