 <html>
	<head>

	</head>
	<body>
		<script>
			function Agrega(){
 
				//obtenemos los valores de nuestra caja de texto
				var codigo=document.getElementById("txtCodigo").value;
				var nombre=document.getElementById("txtNombre").value;
				var precio=document.getElementById("txtPrecio").value;
				 
				//creamos un objeto tr que anexaremos a nuestra tabla llamada tableProductos
				var TR= document.createElement("tr");
				 
				//creamos 4 elementos td en donde iran los datos y uno cuarto donde ira un boton para eliminar
				var TD1=document.createElement("td");
				var TD2=document.createElement("td");
				var TD3=document.createElement("td");
				var TD4=document.createElement("td");
				var boton = document.createElement("button");
				boton.innerHTML="eliminar";
 				
				boton.onclick = function() {Elimina(boton)};
				
				//asignamos los valores a nuestros td por medio del atributo innerHTML, el cual tiene el contenido HTML de un Nodo
				TD1.innerHTML=codigo;
				TD2.innerHTML=nombre;
				TD3.innerHTML=precio;
				 
				//A continuación asignamos contenido html a nuestro cuarto td
				//esta es una forma de crear elementos tambien, dando el codigo html a un Nodo
				TD4.appendChild(boton);
				 
				//Ahora proseguimos a agregar los hijos TD al Padre TR
				//Esta es otra manera de crear elementos HTML, por medio de el metodo appendChild
				TR.appendChild(TD1);
				TR.appendChild(TD2);
				TR.appendChild(TD3);
				TR.appendChild(TD4);
				 
				//Por ultimo asignamos nuestro TR a la tabla con id tablaProductos
				document.getElementById("tablaProductos").appendChild(TR)
				 
				//limpiamos nuestros inputs para agregar mas datos, y ponemos el foco nuevamente en el input de codigo
				document.getElementById("txtCodigo").value="";
				document.getElementById("txtNombre").value="";
				document.getElementById("txtPrecio").value="";
				document.getElementById("txtCodigo").focus();
			}
			
			function Elimina(NodoBoton){
				//recibimos el boton como parametro, obtendremos el tr que lo contiene de la siguiente manera
				//Como nuestro boton es hijo de un td, y este td de el tr, debemos invocar dos veces parentNode
				//Esto para llegar a tener el TR
				var TR= NodoBoton.parentNode.parentNode;
				 
				//ahora que ya tenemos el padre TR, podemos eliminarlo de la siguiente manera
				//junto a todos sus hijos
				 
				document.getElementById("tablaProductos").removeChild(TR);
			}
		</script>
		<input type="text" id="txtCodigo" value="" />
		<input type="text" id="txtNombre" value="" />
		<input type="text" id="txtPrecio" value="" />
		<input type="button" value="Agregar" onclick="Agrega()"/>
		
		<table style="width:400px;" border="1" id="tablaProductos">
			<tr>
				<th>Código</th>
				<th>Nombre</th>
				<th>Precio</th>
				<th>X</th>
			</tr>
		</table>
	</body>
</html>

created 1 year ago

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

Any HTML document must start with document declaration <!DOCTYPE html>
HTML documents begin with <html> and ends with </html>
Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
Paragrahs are defined in <p>..</p> tag.

Links are defined in <a> tag.

Example:

<a href="https://onecompiler.com/html">HTML online compiler</a>

Images are defined in <img> tag, where src attribute consists of image name.
Buttons are defined in <button>..</button> tag
Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

HTML element is everything present from start tag to end tag.
The text present between start and end tag is called HTML element content.
Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
Do not forget the end tag.
Elements with no content are called empty elements.
Elements can have attributes which provides additional information about the element.
In the below example, href is an attribute and a is the tag name.
Example:
```
<a href="https://onecompiler.com/html">HTML online compiler</a>
```

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

HTML Tables are defined in <table> tag.
Table row should be defined in <tr> tag
Table header should be defined in <th> tag
Table data should be defined in <td> tag
Table caption should be defined in <caption> tag

HTML-Javascript

Javascript is used in HTML pages to make them more interactive.
<script> is the tag used to write scripts in HTML
You can either reference a external script or write script code in this tag.

Example

<script src="script.js"></script>