Eliminar fila de tabla html con javascript

JAVASCRIPT

Eliminar fila de tabla html con javascript Seguimos avanzando con el desarrollo de funciones útiles del lado del cliente en javascript, en esta entrada veremos como de una tabla HTML podemos eliminar filas mediante javascript, para este ejemplo utilizaremos una tabla con un pequeño estilo CSS para que se visualmente se vea agradable, luego colocaremos una columna “Acción” en la que tendremos nuestro botón eliminar, así que sin mas ni mas aquí el código.

tabla html

Eliminar fila de tabla html con javascript:

<table id="customers">
<tbody>
<tr>
<th>Persona</th>
<th>Empresa</th>
<th>URL</th>
<th>Accción</th>
</tr>
<tr>
<td>Steve Jobs</td>
<td>Apple</td>
<td>https://www.apple.com/</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
<tr class="alt">
<td>Larry Page</td>
<td>Google</td>
<td>https://www.google.com.co</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
<tr>
<td>Peter Thiel</td>
<td>PayPal</td>
<td>https://www.paypal.com</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
<tr class="alt">
<td>Bill Gates</td>
<td>Microsoft</td>
<td>www.microsoft.com</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function Eliminar (i) {
 document.getElementsByTagName("table")[0].setAttribute("id","tableid");
 document.getElementById("tableid").deleteRow(i);
}
</script>

¡Suscríbete a mi canal, para acceder a más contenidos gratuitos!

5 comentarios

  1. Itzae Contestar

    no le entiendo a esta linea…!
    document.getElementsByTagName(“table”)[0].setAttribute(“id”,”tableid”);
    para que es??
    para que me sirve??

    • Ivan David Lopez Autor de la entradaContestar

      Hola amigo, con el uso del método getElementsByTagName retornas una lista de elementos, es muy útil, si deseas saber que estás retornando solo muestra en un alert e irás cayendo en cuenta de que se trata, así mismo puedes ampliar tus dudas aca:
      getElementsByTagName

    • Tito Flores Vicente Contestar

      a mi me gustan las cosas simples. gracias a ese ejemplo lo reduci a uno espefico..!!
      la funcion esa me gusta porque evita hacer redundancia de metodos

      function Eliminar (i) {
      document.getElementById(‘tblProductos’).deleteRow(i);
      }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *