0
125
VisualizaçõesAgregue el relleno derecho a la cadena para que se muestre en una estructura de fila/columna consistente
Actualizar
Por el aspecto de las cosas, no parece que me queden muchas opciones aquí, excepto usar una fuente monoespaciada como sugiere Andreas. Sin embargo, dado que la interfaz que estoy usando no me permite controlar las fuentes, ¿supongo que esto se podría deshacer?
================================================== ==============
Debo formatear una cadena para que aparezca como una tabla. Será puramente texto (ni siquiera RTF). El resultado final es que esto se completará en un área de texto en un formulario. Hasta ahora tengo lo siguiente:
var content = [ { columnName: 'Date of Birth:', value: '11/26/1994', 'editable':'N'}, { columnName: 'Name:', value: 'Lewis Menelaws', 'editable':'Y'}, { columnName: 'Address:', value: '123 Apple Road', 'editable':'N'} ]; function padEnd(str){ var size = 20; while(str.length < size){ str += " "; } return str; } var str = ""; for(var key in content) { var obj = content[key]; str += padEnd(obj.columnName); str += padEnd(obj.value); str += obj.editable; str += "\n"; } alert(str);El resultado es el siguiente:
La expectativa es la siguiente:
¿Alguna sugerencia?
PD: Extrañamente, si console.log(str) , aparece bien formateado en la consola del navegador. Pero supongo que el formato en el que lo veo en el cuadro de alert es cómo se completará en el área de texto.
JSFiddle para jugar
2 Respostas
Responde à pergunta0
Probablemente no sea el mejor enfoque, pero puede jugar midiendo el ancho del texto en un div auxiliar invisible creado dinámicamente. Luego, en base a esto, puede calcular la cantidad requerida de espacios.
Por ejemplo, una función simple de texto de measureText podría verse así.
function measureText(text) { var fontSize = 12; var test = document.getElementById("text-measure-helper"); if (!test) { test = document.createElement("div"); test.id = "text-measure-helper" test.style.position = "absolute"; test.style.visibility = "hidden"; test.style.width = "auto"; test.style.height = "auto"; test.style.whiteSpace = "nowrap"; document.body.appendChild(test); } test.innerHTML = text; test.style.fontSize = fontSize; return test.clientWidth + 1; }Aquí está el violín modificado .
Aunque no es perfecto en esta forma, todavía hay una ligera desalineación, pero tal vez pueda modificarlo para obtener un resultado final aceptable.
0
¿Ha pensado en AlertBox personalizado a través de algunos de los marcos que está utilizando en su proyecto, con alerta incorporada parece que no es posible?