0
392
VisualizaçõesCómo establecer una cadena var dada como nombres de columna y datos usando DataTable en Javascript
Usando una función 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";desea configurar tableHeaders como encabezado y datos como tableData, para que la tabla se vea como
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
puedes usar :
-
yourstring.split(",")para transformar sus datos como una matriz - table.insertRow para insertar una nueva fila en una etiqueta de tabla
- row.insertCell para insertar una nueva celda en la etiqueta de la tabla
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>
·
Juan Pablo Isaza
Relatório
0
espero que esto te ayude
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>
·
Juan Pablo Isaza
Relatório
Responde à pergunta