Использование функции javascript

function initializeUserTable(tableHeaders , tableData ) {
     // I want to set table headers and table data
}
var tableHeaders = "ID,USERNAME,STATUS,LOGIN";

var tableData = "1,ABC,ACTIVE,N,2,DEF,INACTIVE,Y,3,XYZ,ACTIVE,Y";

Хотите установить tableHeaders как заголовок и данные как tableData, чтобы таблица выглядела как

enter image description here

0
Ravi 4 Фев 2022 в 16:25

1 ответ

Я надеюсь это поможет тебе

    var table = document.getElementsByTagName("table")[0];
            var ths = ["ID","USERNAME","STATUS","LOGIN"];
            var tds = [["1","ABC","ACTIVE","N"],["2","DEF","INACTIVE","Y"],["3","XYZ","ACTIVE","Y"]];
            let tr = document.createElement("tr");
            function initializeUserTable(tableHeaders , tableData ){
    
                 for(let i=0;i<ths.length;i++){
                    for(let j=0;j<tableHeaders.length;j++){
                        if(i==0){
                            let th = document.createElement("th");
                             th.innerHTML=tableHeaders[j];
                            if(j==0){
                                tr.appendChild(th);
                            }
                            tr.appendChild(th);
                        }
                        else{
                            let td = document.createElement("td");
                             td.innerHTML=tableData[i-1][j];
                            tr.appendChild(td);
                        }
                    }
                  table.insertAdjacentElement("beforeend",tr);
                  tr = document.createElement("tr");
                }
            }
            initializeUserTable(ths,tds);
            table{
                border-collapse: collapse;
            }
             table,th, td {
                border:2px solid black;
                width:50%;
                height:20px;
                text-align: center;
                }
                th{
                    background: lightgray;
                }
<!DOCTYPE html>
<html>
    <head>
        <title>tableData</title>
    </head>
    <body>
        <table>
            
        </table>

    </body>
</html>
0
yakov sachuk 4 Фев 2022 в 19:00
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, отредактируйте, чтобы добавить дополнительные сведения, такие как цитаты или документация, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
 – 
Community
4 Фев 2022 в 18:30