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

 
Vista:
sin imagen de perfil

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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

añadir un contador para un generador de filas

Publicado por xve (2100 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
sin imagen de perfil

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