How to set given var string as a column names and data using DataTable in Javascript

Question

Using a javascript function

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";

want to set the tableHeaders as a header and data as a tableData, so the table looks like

yakov sachuk · Accepted Answer · 2022-02-04 16:00:17Z

1

I hope this is help you

    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>

edited Feb 4, 2022 at 16:00

answered Feb 4, 2022 at 14:54

yakov sachuk

2151 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

jeremy-denis · Accepted Answer · 2022-02-04 19:20:32Z

you can use :

yourstring.split(",") to transform your data as array
table.insertRow to insert new row in a table tag
row.insertCell to insert new cell in table tag

var tableHeaders = "ID,USERNAME,STATUS,LOGIN";
var tableData = "1,ABC,ACTIVE,N,2,DEF,INACTIVE,Y,3,XYZ,ACTIVE,Y";

function insertRow(table) {
  if (!table.dataset.number) {
    table.dataset.number = 0;
  }
  var rowNumber = parseInt(table.dataset.number);
  table.dataset.number = rowNumber + 1;
  return table.insertRow(rowNumber);
}

function insertCell(row) {
  if (!row.dataset.number) {
    row.dataset.number = 0;
  }
  var cellNumber = parseInt(row.dataset.number);
  row.dataset.number = cellNumber + 1;
  return row.insertCell(cellNumber);
}

function initializeUserTable(tableHeaders, tableData) {
     var headers = tableHeaders.split(",");
     var datas = tableData.split(",");
     var table = document.getElementById('my-table');
     var row = insertRow(table);
     let cell;
     
     headers.forEach(header => {
      cell = insertCell(row);
      cell.outerHTML = `<th>${header}</th>`;
     });
     
     row = insertRow(table);

     datas.forEach(data => {
      cell = insertCell(row);
      cell.innerHTML = data;
      if (parseInt(row.dataset.number) === headers.length) {
        row = insertRow(table);
      }
     });
}

initializeUserTable(tableHeaders, tableData);

table,th, td {
    border:1px solid #ddd;
    padding:5px;
    text-align: center;
}

table {
  border-collapse: collapse;
}

th {
   background: #efefef;
}

<table id="my-table"><table>

Thanks, it worked for me, it's good if the table is viewed using DataTable

Collectives™ on Stack Overflow

How to set given var string as a column names and data using DataTable in Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related