elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  problemas al eliminar filas de una tabla en javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: problemas al eliminar filas de una tabla en javascript  (Leído 7,225 veces)
evilsoft

Desconectado Desconectado

Mensajes: 2


Ver Perfil
problemas al eliminar filas de una tabla en javascript
« en: 4 Junio 2017, 04:53 am »

Buenas noches gente espero que esten bien. Mi gente tengo un problema con respecto al tratar de eliminar una linea de una tabla de javascript esto me genera cambios en los id de los input de texto.
Este es el HTML
Código:
<html>
<head>
<script type="text/javascript" src="table_script.js"></script>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>

<tr id="row1">
<td id="name_row1">Ankit</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>

<tr id="row2">
<td id="name_row2">Shawn</td>
<td id="country_row2">Canada</td>
<td id="age_row2">26</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>

<tr id="row3">
<td id="name_row3">Rahul</td>
<td id="country_row3">India</td>
<td id="age_row3">19</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>

<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>

</table>
</div>

</body>
</html>

Y este es el javascript:
Código:
function edit_row(no)
{
 document.getElementById("edit_button"+no).style.display="none";
 document.getElementById("save_button"+no).style.display="block";

 var name=document.getElementById("name_row"+no);
 var country=document.getElementById("country_row"+no);
 var age=document.getElementById("age_row"+no);

 var name_data=name.innerHTML;
 var country_data=country.innerHTML;
 var age_data=age.innerHTML;

 name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
 country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
 age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
}

function save_row(no)
{
 var name_val=document.getElementById("name_text"+no).value;
 var country_val=document.getElementById("country_text"+no).value;
 var age_val=document.getElementById("age_text"+no).value;

 document.getElementById("name_row"+no).innerHTML=name_val;
 document.getElementById("country_row"+no).innerHTML=country_val;
 document.getElementById("age_row"+no).innerHTML=age_val;

 document.getElementById("edit_button"+no).style.display="block";
 document.getElementById("save_button"+no).style.display="none";
}

function delete_row(no)
{
     
 
    document.getElementById("row"+no+"").outerHTML="";
   
   
     
}

function add_row()
{
 var new_name=document.getElementById("new_name").value;
 var new_country=document.getElementById("new_country").value;
 var new_age=document.getElementById("new_age").value;

 var table=document.getElementById("data_table");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

 document.getElementById("new_name").value="";
 document.getElementById("new_country").value="";
 document.getElementById("new_age").value="";
}

se basa en 4 funciones una para editar(edit_row), guardar(save_row), eliminar(delete_row), add_row(agregar).
El problema esta en cuando deseo eliminar una fila intermedia osea no al final por que al final lo hace bien, sino digamos entre varias filas un ejemplo podia ser si tengo 5 filas:
1.fila.
2.fila.
3.fila.
4.fila.
5.fila.

y deseo eliminar la fila 2 entonces me quedaria las siguientes filas :

1.fila.
3.fila.
4.fila.
5.fila.

no existe la fila 2 y por ende ahora si cuando se va agregar una fila como hay 4 filas entonces el lo identifica con el codigo de
 
Código:
var table_len=(table.rows.length)-1;

con esto calculo el total de filas que hay y como antes habia 5 ahora el toma el valor de 4 y a esa fila tambien inicia en 4 por ende los id que identifican los controles o input que estan dentro como "name_text", "country_text","age_text" se modifican para cada fila.
osea que para :
fila 1. Esta el name_text1,country_text1,age_text1
fila 3. Esta el name_text3,country_text3,age_text3
fila 4. Esta el name_text4,country_text4,age_text4
fila 5. Esta el name_text5,country_text5,age_text5

al agregar una nueva fila esta toma el valor de la cantidad de filas que hay en la tabla y al contarlas hay 4 (esto lo logramos con la variable table_len).Entonces al agregarla quedaria como:

fila 1. Esta el name_text1,country_text1,age_text1
fila 3. Esta el name_text1,country_text3,age_text3
fila 4. Esta el name_text4,country_text4,age_text4
fila 5. Esta el name_text5,country_text5,age_text5
fila 4. Esta el name_text4,country_text4,age_text4.

Aqui esta el problema real que no puede volver a tomar el numero 4 sino que lo que quiero es reorganizarlo de tal forma que quede de la siguiente manera:
fila 1. Esta el name_text1,country_text1,age_text1 (queda igual).
fila 3. Esta el name_text1,country_text3,age_text3 (quedaria como fila 2)
fila 4. Esta el name_text4,country_text4,age_text4 (quedaria como fila 3)
fila 5. Esta el name_text5,country_text5,age_text5 (quedaria como fila 4)
fila 4. Esta el name_text4,country_text4,age_text4.(quedaria como fila 5)

Asi

fila 1. Esta el name_text1,country_text1,age_text1
fila 2. Esta el name_text2,country_text2,age_text2
fila 3. Esta el name_text3,country_text3,age_text3
fila 4. Esta el name_text4,country_text4,age_text4.
fila 5. Esta  el name_text5,country_text5,age_text5.


les agradezco su colaboracion de antemano y gracias a todos que tengan una feliz noche.


En línea

LaThortilla (Effort)

Desconectado Desconectado

Mensajes: 234


¿En que vida harás lo que en esta no?


Ver Perfil WWW
Re: problemas al eliminar filas de una tabla en javascript
« Respuesta #1 en: 4 Junio 2017, 05:44 am »

Facil compañero...

Creo que estas enfocando mal tu solucion.

yo lo haria asi:


en la funcion delete_row y en las demas puedes aplicar el mismo enfoque... utiliza "this" en ves del id:

Código
  1. <input type="button" value="Delete" class="delete" onclick="delete_row(this)">


y utiliza "closest" para acceder al elemento padre en el DOM:
Código
  1. function delete_row(e){
  2. e.closest("tr").remove();
  3. }


En línea

evilsoft

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Re: problemas al eliminar filas de una tabla en javascript
« Respuesta #2 en: 4 Junio 2017, 06:16 am »

Gracias genial LATHORTILLA te lo agradezco si me funciono. Este me podrias hacer un favor este explicame  esa linea de eliminar.
En línea

LaThortilla (Effort)

Desconectado Desconectado

Mensajes: 234


¿En que vida harás lo que en esta no?


Ver Perfil WWW
Re: problemas al eliminar filas de una tabla en javascript
« Respuesta #3 en: 4 Junio 2017, 07:26 am »

Gracias genial LATHORTILLA te lo agradezco si me funciono. Este me podrias hacer un favor este explicame  esa linea de eliminar.

Bueno Google te lo explica mejor que yo pero igual te pongo mi explicacion:

Google Closset javascript: https://www.google.com.mx/search?q=closest+javascript&oq=closest+javascript
Google Remove javascript:https://www.google.com.mx/search?q=remove+javascript


Bueno. El closset sirve para hacer referencia al componente padre mas cercano que cunpla con el selector CSSS

ejemplo:
Código
  1. <div id="padre-absoluto">
  2.         <div class="componente-padre">
  3. <div class="hijo1" onclick = "haceralgo(this)">Hijo 1</div>
  4. <div class="hijo2" onclick = "haceralgo(this)">Hijo 2</div>
  5. <div class="hijo3" onclick = "haceralgo(this)">Hijo 3</div>
  6. <div class="hijo4" onclick = "haceralgo(this)">Hijo 4</div>
  7. <div class="hijo5" onclick = "haceralgo(this)">Hijo 5</div>
  8. <div class="hijo6" onclick = "haceralgo(this)">Hijo 6</div>
  9. </div>
  10.  
  11. <div class="componente-padre">
  12. <div class="hijo1" onclick = "haceralgo(this)">Hijo 1</div>
  13. <div class="hijo2" onclick = "haceralgo(this)">Hijo 2</div>
  14. <div class="hijo3" onclick = "haceralgo(this)">Hijo 3</div>
  15. <div class="hijo4" onclick = "haceralgo(this)">Hijo 4</div>
  16. <div class="hijo5" onclick = "haceralgo(this)">Hijo 5</div>
  17. <div class="hijo6" onclick = "haceralgo(this)">Hijo 6</div>
  18. </div>
  19. </div>
  20.  

Código
  1. function haceralgo(e){
  2.    // e  es el elemento que ejecuta la accion o el this que espesificamos en el html
  3.   // por lo tanto si queremos obtener el padre inmediato que tiene la clase componente-padre del elemento "e"... debemos usar closest
  4.  
  5.  var comp_padre = e.closest(".componente-padre");
  6.  
  7.  
  8.  
  9.  
  10. //  si queremos obtener el componente padre del elemento "e" con la clase padre-absoluto...
  11.  var comp_padre_absoluto = e.closest(".padre-absoluto");
  12.  
  13.  
  14. //si queremos eliminar un elemento en el doom solo debemos usar remove
  15.  
  16. //eliminar el elemento padre inmediato de "e"  con la clase  componente-padre
  17.  
  18. comp_padre.remove();
  19.  
  20.  
  21. //si queremos eliminar  todos los elementos que contiene comp_padre_absoluto:
  22.  
  23. comp_padre_absoluto.innerHTML  ="";
  24.  
  25. }
  26.  
« Última modificación: 4 Junio 2017, 07:32 am por LaThortilla (Effort) » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Filas de una tabla con y sin relación
Bases de Datos
sexto 3 3,253 Último mensaje 25 Mayo 2012, 14:43 pm
por HdM
Seleccionar filas de una tabla HTML con javascript
Desarrollo Web
M3LiNdR1 2 22,112 Último mensaje 20 Diciembre 2014, 23:16 pm
por martindn94
Numero de filas máximas en una tabla con Loocalhost en Xampp (PhpMyAdmin)
Bases de Datos
z3nth10n 5 9,169 Último mensaje 1 Agosto 2013, 16:24 pm
por 1mpuls0
Angularjs, Problemas al generar una tabla con filas editables
Desarrollo Web
vane777 2 3,577 Último mensaje 11 Abril 2014, 07:13 am
por EFEX
conteo de filas afectadas al truncar tabla
Bases de Datos
d91 1 2,892 Último mensaje 26 Noviembre 2015, 20:12 pm
por Carloswaldo
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines