JQuery - MANIAQUISMO TOTAL con tablas

 
Vista:
sin imagen de perfil

MANIAQUISMO TOTAL con tablas

Publicado por Emmanuel (3 intervenciones) el 12/04/2016 21:49:53
Buenas tardes, espero que me puedan ayudar con este problema que no logro resolverlo .
genero una tabla dinámica con javascript asi:

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
function addRow(tableID) {
 
var miTabla = document.getElementById(tableID);
 
//var rowCount = table.rows.length;
//var row = table.insertRow();
 
var miTabla = document.getElementById("cuerpotabla");
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var celda4 = document.createElement("td");
var element2 = document.createElement("input");
element2.type="text";
celda4.appendChild(element2);
var element1 = document.createElement("input");
element1.type = "button";
element1.value = "+";
element1.style.width="20px";
element1.style.height="22px";
element1.setAttribute("onclick", "addRow('cuerpotabla')");
celda3.appendChild(element1);
celda1.innerHTML = "txt1";
celda2.innerHTML = "txt2";
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda4);
fila.appendChild(celda3);
var TR = miTabla.getElementsByTagName("tr");
 
 
miTabla.insertBefore(fila, TR[1]);  }
 
y al comiendo de la tabla ya tengo 2 filas creadas por default que son el emcabezado y lo que yo quiero es que cuando le de click a una fila me aparesca un alert(''); diciendome el numero de index donde se encuentra y lo hago de esta forma:
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" >
 
$(document).ready(function(){
$("tr").on('click', function(){
var x = $(this).index();
 
alert(x);
})
})
</script>
y todo bien hasta ahí por que si me da el numero de index de la fila que le di clic pero solo me da el index de las primeras dos filas que ya tengo por default y mi PROBLEMA ES QUE CUANDO CREO UNA FILA DINAMICAMENTE Y LE DOY CLIC EN ELLA PARA QUE ME MUESTRE SU INDEX NO ME SALE NADA.
Espero que me puedan ayudar con este problema 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: 302
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

MANIAQUISMO TOTAL con tablas

Publicado por xve (673 intervenciones) el 13/04/2016 08:18:54
Hola Emmanuel, el problema que tienes, es que cuando generas el evento click, no existen dichas columnas en el DOM de la página, por lo que no las va a reconocer nunca.

Cada vez que añadas una nueva linea, tienes que eliminar el evento click (unbind) y volver a crearlo...

Algo así:
1
2
$("tr").unbind('click').on('click', function(){
...

Coméntanos, ok?
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

MANIAQUISMO TOTAL con tablas

Publicado por Emmanuel (3 intervenciones) el 13/04/2016 17:59:22
Gracias por tu respuestas xve, mira en realidad lo que quiero hacer con todo esto es añardir una fila con un boton (+) que siempre se encontraran al final de cada fila creada pero agregarla abajito de la que di clic, entonces lo que según yo hago es que cuando le de clic al botón (+) capture su numero de index con:

1
2
3
4
5
6
$(document).ready(function(){
$("tr").on('click', function(){
var x = $(this).index();
 
})
})

y una vez que capture su index lo pongo dentro de:

miTabla.insertBefore(fila, TR[x]);

y así el insertBefore ya sabe en que posición de toda la tabla poner la nueva fila, y al parecer ya lo hace pero pasa algo muy rraro porque cuando agrego la nueva fila se agregar bien pero al darle click ala fila que esta arriba de esta ultima se cambian de posición y no se porque, y lo que sospecho esque tengo mal acomodado el codigo que uso para capturar el index, mita teadjunto el codigo tal cual lo tengo:
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

MANIAQUISMO TOTAL con tablas

Publicado por Emmanuel (3 intervenciones) el 15/04/2016 04:55:56
informo que ya solucione el problema y lo que me faltaba hacer era depues de obtener el evento clic me faltaba eliminarlo asi:

$("p").unbind("click");

y mi funcion que agregar una nueva fila ala tabla quedo asi:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<script type="text/javascript">

function addRowmas(tableID){





var miTabla = document.getElementById(tableID);
var TR = miTabla.getElementsByTagName("tr");
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var celda4 = document.createElement("td");

var element1 = document.createElement("input");
element1.type="text";


var element2 = document.createElement("input");
element2.setAttribute("type", "button");
element2.value = "+";
element2.style.width="20px";
element2.style.height="22px";
element2.setAttribute("id", "boton");
element2.setAttribute("onclick", "addRowmas('cuerpotabla');");


celda3.appendChild(element1);
celda4.appendChild(element2);
celda1.innerHTML = "txt1";
celda2.innerHTML = "txt2";
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda4);
fila.appendChild(celda3);



$(document).ready(function(){

$( "tr" ).bind( "click", function() {

var x = $(this).index();

miTabla.insertBefore(fila,TR[x]);

//CON ESTO ELIMINO EL CLIC para que no siga activo

$("tr").unbind();


})
})



}




</script>
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