problemas al eliminar filas de una tabla en javascript

Iniciado por EvilSoft, Junio 03, 2017, 10:19:43 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario
Junio 03, 2017, 10:19:43 PM Ultima modificación: Junio 03, 2017, 11:44:45 PM por EvilSoft
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: text
<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: text

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: text
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.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario