-1

Estoy tratando de crear un mini sistema que, de forma aleatoria, me permita seleccionar el ganador de un premio para empleados en la empresa donde trabajo. Yo consigo un dato de forma aleatoria y puedo mostrarlo en un td con un id ="listadeganadores" , lo que quiero es que en esa tabla, salte al segundo y a un tercer puesto.

El código siguiente imprime en el resultado del primero pero al ejecutarlo me lo borra por el otro.

d3.select("#ganadores").text(data[picked].question);
oldrotation = rotation;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<table id="listadeganadores" border="1">
  <tr>
    <td colspan="5" align="center">RESULTADOS</td>
  </tr>
  <tr>
    <!--   en estos td van los resultados    -->
    <td id="ganadores"></td>
  </tr>
</table>

2
  • 1
    Por favor se más descriptivo en cuanto al planteamiento de tu problema
    – Eztronics
    Commented el 28 ene. 2018 a las 0:45
  • El problema no parece tener nada que ver con JSON, valores aleatorios o tablas (directamente), y en cambio sí con d3.js. Deberías etiquetar mejor la pregunta y describir mejor el problema. Te recomiendo que leas Cómo preguntar donde encontrarás consejos para mejorar tus publicaciones, y que completes el recorrido de bienvenida para ver cómo funciona el sitio en general (y ganar con ello tu primera medalla).
    – Alvaro Montoro
    Commented el 28 ene. 2018 a las 0:50

2 respuestas 2

1

El problema es que estás usando text() que reemplazará el contenido del elemento seleccionado con el texto que se pase. Lo que podrías hacer es usar append para añadir un div o un contenedor, y luego el text en dicho elemento.

En d3, que parece que es lo que usas, sería algo como esto:

var ganadores = ["Ganador 1", "Ganador 2", "Ganador 3"];

d3.select("#ganadores").append("div").text(ganadores[0]);
d3.select("#ganadores").append("div").text(ganadores[1]);
d3.select("#ganadores").append("div").text(ganadores[2]);
#ganadores div:nth-child(1) {
  text-align: center;
}

#ganadores div:nth-child(2),
#ganadores div:nth-child(3) {
  width: 50%;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<table id="listadeganadores" border="1" >
  <tr>
    <td colspan="5" align="center">RESULTADOS</td>
  </tr>
  <tr>
    <!--   en estos td van los resultados    -->
    <td id="ganadores"></td>
  </tr>
</table>

7
  • excelente, esta me funciono!!! no sabia lo del append. tengo 2 consultas mas, si quiero colocar al primero arriba y los dos abajo , como una piramide. como puedo asignarle ese limite en la tabla?
    – Juan Ortiz
    Commented el 28 ene. 2018 a las 2:47
  • otra cosa, como puedo concatenar 2 valores, quiero colocarle que fue el ganador , con su nombre y apellido, y los demas de abajo como sub campeones @alvaro Montoro
    – Juan Ortiz
    Commented el 28 ene. 2018 a las 2:49
  • @JuanOrtiz en ese caso podrías hacer que el segundo y tercer div tengan estilos diferentes. De ese modo se mostrarán como quieres. Voy a editar el código para poner un ejemplo.
    – Alvaro Montoro
    Commented el 28 ene. 2018 a las 2:49
  • Para concatenar valores, en JavaScript puedes usar el operador +. Así lo que harías sería concatenar los valores en el text. Algo como .text(data[picked].question + " " + data[picked].answer) (o el valor que quieras concatenar.
    – Alvaro Montoro
    Commented el 28 ene. 2018 a las 2:51
  • genial !!! ya pude agregarles su nombre a cada uno de ellos @alvaro Montoro. una ultima cosa, yo les he colocado ya su nombre y apellido pero me gustaria mucho colocarles su foto , logre concatenar como me dijiste usando el siguiente codigo .text( function(d, i) { return data[i].nombre+ '\n' +data[i].apellido; //se concateno el return para poder agregar mas cosas }); y yo tengo las fotos, pero cuando se las quiero agregar a esa vista me aparecen en texto las rutas de las imagenes que les corresponden a ellos. -
    – Juan Ortiz
    Commented el 28 ene. 2018 a las 5:30
0

El <tr> donde quieres que se inserte tendra que tener un id. supongamos que esta declarado así

tr id="puestos">

Entonces Si usas JQuery puede ser así

var puesto1 = $("<td>"); 

var puesto2 = $("<td>");

var puesto3 = $("<td>");


$("#puestos").append(puesto1);

$("#puestos").append(puesto2);

$("#puestos").append(puesto3);

Para añadir texto a cada uno se hace así

puesto1.text("Primer lugar");
1
  • no me va a funcionar. el problema esta en que necesito que se guarde en cada casilla proxima luego de que el resultado se genere. necesito en si que algo se autogenere , verifique si hay algo en el puesto 1 y si es asi valla a la otra para escribirlo. creo que se hace mediante for pero no estoy muy claro en js
    – Juan Ortiz
    Commented el 27 ene. 2018 a las 23:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.