Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: evilsoft en 4 Junio 2017, 04:53 am


Título: problemas al eliminar filas de una tabla en javascript
Publicado por: evilsoft 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.

Título: Re: problemas al eliminar filas de una tabla en javascript
Publicado por: LaThortilla (Effort) 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. 			}

Título: Re: problemas al eliminar filas de una tabla en javascript
Publicado por: evilsoft 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.

Título: Re: problemas al eliminar filas de una tabla en javascript
Publicado por: LaThortilla (Effort) en 4 Junio 2017, 07:26 am
Cita de: evilsoft 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.

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 (https://www.google.com.mx/search?q=closest+javascript&oq=closest+javascript)
Google Remove javascript:https://www.google.com.mx/search?q=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.  


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines