Hay un mensaje recibido del backend que se ve así:
[ { "Name": "ABC", "ColumnType": "NUMBER" }, { "Name": "XYZ", "ColumnType": "STRING" }, { "Name": "EFG", "ColumnType": "NUMBER" }, { "Name": "JKL", "ColumnType": "STRING" }, { "Name": "TOP", "ColumnType": "TIMESTAMP" }, ]El "Nombre" se usa como el nombre de la columna en la tabla y los datos en la columna se alinean con el tipo de columna, es decir, para un tipo de columna "NÚMERO" y "TIMESTAMP" se alinean a la derecha y para ColmnType "CADENA" se alinean a la izquierda.
He probado lo siguiente,
var td = document.getElementsByTagName('td'); let tdArr = Array.from(td); for (var item in snapshot) { let DataHeader = snapshot[item].DataHeader; for(let x in DataHeader){ let colType = snapshot[item].DataHeader[x].columnType; for(let z in tdArr){ if(colType === 'STRING' && colType !== 'NUMBER'){ tdArr[z].style.textAlign= "left"; } else if(colType === 'NUMBER' && colType !== 'STRING'){ tdArr[z].style.textAlign= "right"; } else if(colType === 'TIMESTAMP'){ tdArr[z].style.textAlign= "right"; } } } }Sin embargo, esto establece que todos los tds se alineen a la derecha o a la izquierda. ¿Cómo trabajo alrededor de esto? Sé que estoy configurando todos los elementos td y no estoy seguro de cómo puedo obtener elementos td de una columna en particular.
El mensaje que se muestra arriba es parte de un objeto de instantánea que tiene un DataHeader. El encabezado de datos contiene el "Nombre" y el "Tipo de columna".
Cuando usa .forEach() o .map() obtiene el índice como segundo parámetro, lo que puede ser muy útil
let columnInfos = [ { "Name": "ABC", "ColumnType": "NUMBER" }, { "Name": "XYZ", "ColumnType": "STRING" }, { "Name": "EFG", "ColumnType": "NUMBER" } ] columnInfos.forEach((columnInfo, index) => { let columnType = columnInfo.ColumnType let tds = Array.from(document.querySelectorAll(`td:nth-of-type(${index+1})`)) if(columnType === 'NUMBER' || columnType === 'TIMESTAMP') { tds.forEach(td => td.style.textAlign = 'right') }else if(columnType === 'STRING'){ tds.forEach(td => td.style.textAlign = 'right') } })