{"id":243,"date":"2023-01-18T19:10:10","date_gmt":"2023-01-18T19:10:10","guid":{"rendered":"http:\/\/javigomez.org\/?p=243"},"modified":"2025-09-29T20:34:10","modified_gmt":"2025-09-29T20:34:10","slug":"creacion-y-borrado-de-una-tabla-con-javascript","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/01\/18\/creacion-y-borrado-de-una-tabla-con-javascript\/","title":{"rendered":"Creaci\u00f3n y borrado de una tabla con javaScript"},"content":{"rendered":"\n<p>En el siguiente c\u00f3digo se puede ver como se crean l\u00edneas en una tabla. La tabla est\u00e1 creada pero oculta en un primer momento. Si se eliminan todos los elementos se vuelve a ocultar.<\/p>\n\n\n\n<p>Cada l\u00ednea tiene el texto introducido y un bot\u00f3n para poder borrar esa misma l\u00ednea.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n\n&lt;head>\n    &lt;meta http-equiv=\"content-type\" content=\"text\/html;charset=utf-8\">\n    &lt;title> Crear Tabla&lt;\/title>\n\n&lt;\/head>\n\n&lt;body>\n    &lt;h1>Creando una tabla&lt;\/h1>\n    &lt;input type=\"text\" id=\"nombre\">\n    &lt;button onclick=\"anadir()\">a\u00f1adir&lt;\/button>\n    &lt;table id=\"tabla\">\n        &lt;thead>\n            &lt;tr>\n                &lt;th>Nombre&lt;\/th>\n            &lt;\/tr>\n        &lt;\/thead>\n    &lt;\/table>\n\n    &lt;script type=\"text\/javascript\">\n        document.getElementById(\"tabla\").style.display = \"none\";\n\n        function anadir() {\n            document.getElementById(\"tabla\").style.display = \"block\";\n            var nombre = document.getElementById(\"nombre\").value;\n            var tabla = document.getElementById(\"tabla\");\n            var tr = document.createElement(\"tr\");\n            var td = document.createElement(\"td\");\n            var txt = document.createTextNode(nombre);\n            td.appendChild(txt);\n\n            var boton = document.createElement(\"button\");\n            boton.id = \"aa\";\n            var txtboton = document.createTextNode(\"borrar\");\n            boton.onclick = borrarFila;\n            boton.appendChild(txtboton);\n            var tdboton = document.createElement(\"td\");\n            tdboton.append(boton);\n\n            tr.append(td);\n            tr.append(tdboton);\n            tabla.append(tr);\n        }\n\n        function borrarFila() {\n            var td = this.parentElement;\n            var tr = td.parentElement;\n            tr.parentElement.removeChild(tr);\n            var lineas = document.getElementById(\"tabla\").children.length;\n            console.log(lineas);\n            if (lineas == 1)\n                document.getElementById(\"tabla\").style.display = \"none\";\n        }\n    &lt;\/script>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>En el siguiente c\u00f3digo se puede ver como se crean l\u00edneas en una tabla. La tabla est\u00e1 creada pero oculta en un primer momento. Si &hellip; <\/p>\n","protected":false},"author":1,"featured_media":244,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[37,38,103,104,204,286],"class_list":["post-243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-appendchild","tag-appendtextnode","tag-createelement","tag-createtextnode","tag-javascript","tag-removechild"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=243"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/243\/revisions"}],"predecessor-version":[{"id":956,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/243\/revisions\/956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/244"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}