JavaScript - Agregar select a tabla html

   
Vista:
Imágen de perfil de Emiliano

Agregar select a tabla html

Publicado por Emiliano (9 intervenciones) el 08/09/2015 21:30:33
Hola como estan, tendrian la amabilidad de darme su punto de vista o algùn link del tema planteado y su detalle:

Tengo una tabla htm, la cual agrego una nueva fila de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var id_elementos=1,id_selec=0,suma=0,re=0;
 
            function fn_agregar(){
 
			 if(document.getElementById("nombre").value!="" || document.getElementById("precio").value!="" || document.getElementById("cantidad").value!=""  ){
 
				fn_quitar_lineas();
				fn_comprobar_duplicados();
 
			  if(repetido!=1){
 
				var nombre=document.forms["frm_venta"].nombre.value;
				var precio=document.forms["frm_venta"].precio.value;
				var cantidad=document.forms["frm_venta"].cantidad.value;
				var preciot=parseFloat(1*precio).toFixed(2);
 
                cadena = "<tr>";
 
cadena=cadena + "<td width='20px;'>" + "<select id='select_venta["+id_elementos+"]' name='select_venta["+id_elementos+"]' class='txtcantidad_tabla_venta' onchange='pasar_valor(this.value)'>"+"<option selected value='1'>1</option>"+"<select/>"+"</td>";
 
cadena=cadena + "<td width='20px;'>" + "<input type='text' id='cantida_venta["+id_elementos+"]' name='cantida_venta["+id_elementos+"]' class='txtcantidad_tabla_venta' value='"+1+"'/>" +"</td>";
 
                $("#tablas_venta tbody").append(cadena);
 
/////////////////////Aquì cargo el selec creado anteriormente/////////////////////////////////////
 
		selector = document.getElementById("select_venta["+id_elementos+"]");
                var li=document.forms["frm_venta"].cantidad.value;
                 for ( i = 1; i <= cantidad ; i++)
                 {
 
                  selector.options[i] = new Option(i,i);
 
                 }
 
////////////////////////////////////////////////////////////////////////////////////
 
		        document.getElementById('div_btn_agregar').style.display='none';
                fn_dar_eliminar();
				fn_cantidad();
				fn_sumar();
				id_elementos++;
			  }else{
		          document.getElementById('div_btn_agregar').style.display='none';
				  alert("AVISO!! El producto ya esta en la lista de ventas");
 
			  }
			}else{
			 alert("Antes de agregar debe buscar un producto disponible en el stock");
	         document.getElementById('div_btn_agregar').style.display='none';
			     }
 
            }

Se agrega normalmente la nueva linea.

Pero el problema se presenta al llenar el select las dos primeras filas se llenan con su respectiva lista, pero luego desde la tercera en adelante estan vacias.

1
2
3
4
5
6
7
8
selector = document.getElementById("select_venta["+id_elementos+"]");
                var li=document.forms["frm_venta"].cantidad.value;
                 for ( i = 1; i <= cantidad ; i++)
                 {
 
                  selector.options[i] = new Option(i,i);
 
                 }


La cantidad o el limite del for para la lista se la obtiene de una caja de texto, todo normal.

Gracias por su tiempo y sugerencias...
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

Agregar select a tabla html

Publicado por Vainas (239 intervenciones) el 09/09/2015 10:43:29
Buenas:

No se que puede estar pasando.

He hecho este ejemplo que me funciona. Mira a ver si es el id_elementos que no lo estas renovando y siempre tiene el mismo valor por eiemplo

Espero que te sirva

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<button type="button" id="boton_insertar" >Inserta</button>
<input type="text" name="cantidad" value="1">
<table id="tablas_venta">
<thead>
<tr>
	<td> 1 </td>
	<td> 2 </td>
</tr>
</thead>
  <tbody>
  </tbody>
 </table>
<script>
$(document).ready(function() {
var id_elementos=1;
 function fn_agregar(){
 var cantidad = $("[name='cantidad']").val();
	 cadena = "<tr>";
 
	cadena=cadena + "<td width='20px;'>" + "<select id='select_venta["+id_elementos+"]' name='select_venta["+id_elementos+"]' class='txtcantidad_tabla_venta' onchange='pasar_valor(this.value)'>"+"<option selected value='1'>0</option>"+"<select/>"+"</td>";
 
	cadena=cadena + "<td width='20px;'>" + "<input type='text' id='cantida_venta["+id_elementos+"]' name='cantida_venta["+id_elementos+"]' class='txtcantidad_tabla_venta' value='"+cantidad+"'/>" +"</td>";
	$("#tablas_venta tbody").append(cadena);
	selector = document.getElementById("select_venta["+id_elementos+"]");
	for ( i = 1; i <= cantidad ; i++){
		selector.options[i] = new Option(i,i);
	}
	id_elementos++;
}
$("#boton_insertar").click(function(){
	fn_agregar();
});
});
</script>
</body>
</html>

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Emiliano

Agregar select a tabla html

Publicado por Emiliano (9 intervenciones) el 11/09/2015 00:23:53
Gracias por estar pendiente a las preguntas, el incremento es normal..Pero no se que pasa no me lanza un error, tal vez alguna idea de que podria estar pasando....
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Agregar select a tabla html

Publicado por Vainas (239 intervenciones) el 11/09/2015 14:51:17
Buenas:

Y si a mi no me da error puedes ver si de alguna manera estas funciones:

fn_quitar_lineas();
fn_comprobar_duplicados();
....
fn_dar_eliminar();
fn_cantidad();
fn_sumar();

Pueden estar dando algun problema?

Sabrias poner un punto de ruptura en la consola del chrome?

image-39

Lo tienes en la consola de chrome. Puedes poner un breakpoint y asi cuando el codigo llegue a tu seccion "new Option(i,i);" ves si se ha agregado a la lista y si es que despues de eso alguna funcion siguiente lo borra.

Comentanos.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Emiliano

Agregar select a tabla html

Publicado por Emiliano (9 intervenciones) el 11/09/2015 16:50:25
Gracias por su tiempo, lo probare y le comento que sucedio..
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Emiliano

Agregar select a tabla html

Publicado por Emiliano (9 intervenciones) el 12/09/2015 16:08:11
Hola gracias por estar al pendiente de las inquietudes que se nos presenta y el error fue que estaba cerrando mal la etiqueta del select
estaba haciendo esto <select><select/>, lo modifique con su etiqueta de cierre normal y esta funcionando bien..

Gracias..
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar