Foros del Web » Programando para Internet » Jquery »

Asignar valores de forma dinamica a <span> creados dinamicamente

Estas en el tema de Asignar valores de forma dinamica a <span> creados dinamicamente en el foro de Jquery en Foros del Web. Buenos Dias Llevo bastante tiempo con un problema que hasta el momento no he logrado solucionar, se que debe ser sencillo pero hasta el momento ...
  #1 (permalink)  
Antiguo 25/04/2017, 11:20
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 12 años, 8 meses
Puntos: 4
Asignar valores de forma dinamica a <span> creados dinamicamente

Buenos Dias

Llevo bastante tiempo con un problema que hasta el momento no he logrado solucionar, se que debe ser sencillo pero hasta el momento no lo he logrado.

Lo que necesito hacer es lo siguiente:

Estoy creando una tabla dimanica según la cantidad que yo indique. Dentro de esta tabla cada fila tiene 2 radiobutton, necesito que cuando yo le de en algún radiobutton me asigne un valor en el span de su fila correspondiente


Esta es la estructura de mi tabla dinamica
Código HTML:
<table id="js-tabla" class="table table-striped table-bordered">
<thead>
<tr>
     <th>No.</th>
     <th><center>Posición Asignada</center></th>
</tr>
</thead>
<tbody>
<tr id="1">
     <td>1</td>
     <td><center><input id="stock1" class="disponibilidad" name="radio1" value="1:Stock" type="radio"></center>
     </td>
     <td><center><input id="libre1" class="disponibilidad" name="radio1" value="1:Libre" type="radio"></center>
     </td>
     <td><span id=span1></span></td>
</tr>
</tbody>
</table> 
Código jquery:
Ver original
  1. $(".disponibilidad").on("click", function(e) {
  2.             $("#span"+x).text(conteoStock[posiArrayStock]);
  3.             posiArrayStock++;
  4.             x++;
  5.         });

Si le doy en stock1 o en libre1 muestre un valor en el span1, pero si le doy en el stock2 o en libre2 muestre un valor en el span2

Agradezco toda la ayuda que me puedan brindar
  #2 (permalink)  
Antiguo 25/04/2017, 12:54
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Asignar valores de forma dinamica a <span> creados dinamicamente

Toma a la fila que contiene tanto al <span> como al radiobutton utilizando el método .parents(), pasándole como argumento el identificador o nombre de etiqueta de la fila:
Código Javascript:
Ver original
  1. $(".disponibilidad").on("click", function(e){
  2.     var fila = $(this).parents("tr");
  3. });

Y luego tan solo debes tomar al <span> que la fila contiene, para lo cual necesitas usar el método .find():
Código Javascript:
Ver original
  1. $(".disponibilidad").on("click", function(e){
  2.     var fila = $(this).parents("tr"),
  3.         span = fila.find("span");
  4. });

Ya teniendo al <span>, puedes asignarle el contenido que desees:
Código Javascript:
Ver original
  1. span.text("lo que sea");

Hay muchas otras formas de hacer esto; incluso puedes hacerlo todo en una sola fila. Lo describí de esta manera para que puedas tener una idea más clara.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 25/04/2017, 13:52
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 12 años, 8 meses
Puntos: 4
Respuesta: Asignar valores de forma dinamica a <span> creados dinamicamente

Muchas gracias por tu ayuda, la verdad no tengo mucho conocimiento al respecto, pero me sirvió, tengo otra pregunta necesito que si le doy en stock1 muestre 10 pero si le doy en libre1 muestre 5, tambien se puede hacer con .find() pero pasandole el id de cada radiobutton.

ose algo asi

Código Javascript:
Ver original
  1. $(".disponibilidad").on("click", function(e){
  2.             var fila = $(this).parents("tr"),
  3.             span = fila.find("span");
  4.             stock = fila.find("#stock");
  5.             libre = fila.find("#libre");
  6.            
  7.             if(stock.click()){
  8.               span.text("10");
  9.             }else if (libre.click()){
  10.                 span.text("5");
  11.             }  
  12.         });
  #4 (permalink)  
Antiguo 25/04/2017, 14:30
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Asignar valores de forma dinamica a <span> creados dinamicamente

La condición debería verificar el identificador del radiobutton seleccionado:
Código Javascript:
Ver original
  1. if (/^libre/.test($(this).prop("id"))){
  2.     //Si el identificador del radiobutton seleccionado empieza por "libre"
  3. }
  4. else{
  5.     //Si empieza por otra palabra
  6. }

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 25/04/2017, 15:22
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 12 años, 8 meses
Puntos: 4
Respuesta: Asignar valores de forma dinamica a <span> creados dinamicamente

Hola, muchas gracias por tu ayuda si funciono como me lo explicaste, por si alguien se le presenta el problema a continuación muestro como quedo

Código Javascript:
Ver original
  1. $(".disponibilidad").on("click", function(e){
  2.             var fila = $(this).parents("tr"),
  3.             span = fila.find("span");
  4.            
  5.             if (/libre/.test($(this).prop("id"))){
  6.                 alert("Si el identificador del radiobutton seleccionado empieza por libre");
  7.                 span.text(conteoLibre[posiArrayLibre]);
  8.                 posiArrayLibre++;
  9.             }else{
  10.                 alert("Si empieza por otra palabra");
  11.                 span.text(conteoStock[posiArrayStock]);
  12.                 posiArrayStock++;
  13.             }            
  14.         });
  #6 (permalink)  
Antiguo 25/04/2017, 16:55
Avatar de JeMaGa  
Fecha de Ingreso: julio-2011
Ubicación: Bogota
Mensajes: 430
Antigüedad: 12 años, 8 meses
Puntos: 4
Respuesta: Asignar valores de forma dinamica a <span> creados dinamicamente

Oye una ultima ayuda por favor, como puedo dejar readonly la fila completa?

Código Javascript:
Ver original
  1. $(this).parents("tr").prop("readonly", true);

No me funciona
  #7 (permalink)  
Antiguo 25/04/2017, 19:32
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Asignar valores de forma dinamica a <span> creados dinamicamente

Esa es una propiedad de elementos de formulario, no de filas de una tabla ni similares. Si lo que quieres es inhabilitar a los elementos de la fila en cuestión, vas a tener que seleccionarlos y aplicarles uno por uno dicha propiedad, tal cual hiciste para tomar al <span>.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: dinamica, dinamicamente, forma, span
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:38.