JavaScript - añadir un contador para un generador de filas

   
Vista:

añadir un contador para un generador de filas

Publicado por Miguel Angel (5 intervenciones) el 18/11/2015 05:37:13
Buenas gente tengo este código...

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<head>
	<title>Agregar y Eliminar Filas</title>
</head>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
	$(function(){
		//Clona la fila oculta que tiene los campos base y la agrega al final de la tabla
		$("#agregar").on('click', function(){
			$("#tabla tbody tr:eq(0)").clone().removeClass('fila-base').appendTo("#tabla tbody");
		});
		//Evento que selecciona la fila y la elimina
		$(document).on("click",".eliminar",function(){
			var parent = $(this).parents().get(0);
			$(parent).remove();
		});
	});
</script>
<style type="text/css">
	#tabla{
		border: solid 1px #333;
		width: 300px;
	}
	#tabla tbody tr{
		background: #999;
	}
	.fila-base{	/*fila base oculta*/
		display: none;
	}
	.eliminar{
		cursor: pointer; color: #000;
	}
	input[type="text"]{
		width: 80px;	/*ancho a los elementos input*/
	}
</style>
<body>
<table id="tabla">
	<thead>
		<tr>
			<th>Nombre</th>
			<th>Apellidos</th>
			<th>Sexo</th>
			<th>&nbsp</th>
		</tr>
		<tbody>
			<tr class="fila-base">
				<td><input type="text" class="nombre"/></td>
				<td><input type="text" class="apellidos"/></td>
				<td>
					<select class="sexo">
						<option value="0">- Sexo -</option>
						<option value="M">Masculino</option>
						<option value="F">Femenino</option>
					</select>
				</td>
				<td class="eliminar">Eliminar</td>
			</tr>
 
			<tr>
				<td><input type="text" class="nombre"/></td>
				<td><input type="text" class="apellidos"/></td>
				<td>
					<select class="sexo">
						<option value="0">- Sexo -</option>
						<option value="M">Masculino</option>
						<option value="F">Femenino</option>
					</select>
				</td>
				<td class="eliminar">Eliminar</td>
			</tr>
		</tbody>
	</thead>
</table>
<input type="button" id="agregar" value="Agregar fila"/>
</body>
</html>

Lo que hace es simplemente añadir una fila o eliminarla...

Pero tengo problemas al colocar un contador y empezar a contar las filas...
Xq si elimino una fila el contador no se resetea...
Un ejemplo...
Fila 1
Fila 2
Fila 3....
Si elimino digamos la fila 2...
Quedaría...
Fila 1
Fila 3...
Y no quiero eso...
Quiero que quede ...
Fila 1
Fila 2...
Que se resetee el contador...

X favor si alguien me ayuda... Gracias...
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 xve

añadir un contador para un generador de filas

Publicado por xve (1597 intervenciones) el 18/11/2015 11:35:58
Hola Miguel, he revisado tu código y no se ver donde pone Fila1, Fila2, ...

He probado tu código y funciona perfectamente...
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

añadir un contador para un generador de filas

Publicado por Miguel Angel (5 intervenciones) el 19/11/2015 06:55:50
ese es el código base y si añade y elimina filas...
solo que ahi no añadí el código del contador pero solo seria colocar una variable que se incremente y se muestre en cada fila cada vez que presione el botón...

eso es básico pero lo que yo kiero es como hacer para que el contador se resetee dependiendo a las filas que queden despues de eliminar o añadir filas...
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