Alterar registros de tablas dinámicas con JavaScript

jueves 28 julio de 2016 BlogUneWeb Programación

Alterar registros de tablas dinámicas con JavaScript

En este tutorial le mostraremos cómo hacer diferentes operaciones con tablas de forma dinámica gustaría añadir, editar filas filas, eliminar filas y guardar las filas Alterar registros de tablas dinámicas con JavaScript

Para añadir, editar y borrar registros de la tabla dinámica que lleva solamente dos pasos: –

Hacer un archivo HTML y definir marcado
Hacer un archivo js y definir secuencias de comandos
Paso 1.Make un archivo HTML y definir marcado

Hacemos un archivo HTML y guardarlo con un nombre table.html

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

En este paso se crea una tabla e insertar algunos ejemplos de filas de datos y crear 3 botones para cada fila editar, guardar y borrar e insertar table_script.js fichero que íbamos a hecho en el próximo step.

También le recomendamos marcar y desmarcar casillas de verificación Uso de JavaScript

Paso 2.Make un archivo js y definir secuencias de comandos

Hacemos un archivo js y guardarlo con un nombre table_script.js

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="";
}

En este paso que hicimos 4 funciones diferentes para llevar a cabo la operación en table.

Se explicará todas estas funciones una a una.
En primera función que es la función edit_row () se utiliza para editar rows.In esta función obtenemos identificación fila de “no” variable y luego nos escondemos y el botón editar y visualizar el botón de guardar entonces obtenemos todos los datos de fila y de edición de inserción el cuadro de texto con los datos en la fila de edición para hacer filas editable.

En la segunda función que es save_row () se utiliza para guardar el editado row. En esta función se obtiene el valor de toda la caja de texto dentro de tres filas editar e insertar los datos en la fila cuando el usuario hace clic en el botón Guardar y luego cambiar la opción de visualización de editar y botón de guardar.

En tercera función es la función que delete_row () se utiliza para eliminar determinadas filas cuando el usuario hace clic de botón de borrar de su respectiva fila.

En cuarta función que es la función add_row () se utiliza para agregar nuevas filas a table.

En esta función se obtiene el valor de las tres nuevas cuadro de texto se utiliza para insertar los datos a continuación insertamos la fila en la última posición de pd-1 en nuestro caso la última posición en llenado por nuestros tres cuadros de texto es por eso que utilizamos -1 para insertar la nueva fila antes de la nueva fila y el cuadro de texto que borrar el nuevo campo de tres cuadro de texto.

Eso es todo, esta es la forma de añadir, editar y borrar registros de la tabla dinámica utilizando JavaScript.You puede personalizar aún más el código como por su exigencia.

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información

Alterar registros de tablas dinámicas con JavaScript

Comparte esto:

Entradas relacionadas