Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas
Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas

lunes, 31 de mayo de 2010

Metodos para redireccionar URL´s

Método 1. HTML

El primer método es usar el elemento META. Veamos la sintaxis de uso para nuestro propósito:
Código :
<meta http-equiv="acción" content="segundos"; url="url destino" />

Supongamos que has cambiado de servidor o has movido una página a otro directorio. Mostraremos un mensaje acerca de ello y redireccionaremos a nuestro usuario a la nueva ubicación de la página. En este ejemplo, la acción será "refresh", el tiempo en que tardará en refrescar la página será de cinco (5) segundos:
Código :
<html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.pagina.com">
</head>
 
<body>
<p>Nos hemos mudado! Serás dirigido automáticamente en cinco segundos. En caso contrario, puedes acceder haciendo click <a href="http://www.cristalab.com">aquí</a></p>
</body>
</html>

Método 2. PHP

El siguiente ejemplo, redireccionará al usuario sin aviso previo:
Código :
<?php
header ("Location: http://www.pagina.com");
?>

Método 3. JavaScript

Podemos lograr con JavaScript, los métodos anteriormente vistos. En el caso de un redireccionamiento en espera, debemos usar un "temporizador". Veamos un ejemplo:
Código :
<html>
<head>
<script type="text/javascript">
function redireccionar(){
  window.locationf="http://www.pagina.com";
} 
setTimeout ("redireccionar()", 5000); //tiempo expresado en milisegundos
</script>
</head>
<body>
<p> Espere por favor, será redireccionado en 5 segundos.</p>
</body>
</html>

Haciéndolo directamente, sin espera:
Código :
<body>
<script type="text/javascript">
window.location="http://www.pagina.com";
</script>
</body>

miércoles, 6 de enero de 2010

Habilitar y Deshabilitar objetos

<html>
<head>
<script type="text/javascript">
function habilitar(obj){
var hab;
frm=obj.form;
num=obj.selectedIndex;
if (num==1) hab=true;
else if (num==2) hab=false;
else if (num==3) hab=true;
frm.sueldo.disabled=hab;
frm.nombre.disabled=hab;
}
</script>
</head>
<body>
<form>
<select onchange="habilitar(this)">
<option value="a">trabaja</option>
<option value="b">no trabaja</option>
<option value="c">independiente</option>
</select>
<input type="text" name="sueldo" />
<input type="text" name="nombre" />
</form>
</body>
</html>

Script Utiles (bloquear copiado de pagina, cancelar click derecho,etc)

Hora en la barra de estado:

<script language="JavaScript">
<!--
mensaje=" |======|
www.***.com "
function hora() {
var h = new Date();

window.status="|======| "
+ h.getHours() +":"+ h.getMinutes() +""
+mensaje ;
window.setTimeout('hora()',100);
}
hora()
//-->
</script>
Barra de estado Animada:

<script language="JavaScript">
tempo = 10;
chars = 5;

texto = "-- Ingresa el texto aquí --";
wtexto = new Array(33);

wtexto[0] = texto;
blnk = " ";//Mantén estos espacios
for (i = 1;
i < 32; i++) {
b = blnk.substring(0, i);
wtexto = "";
for
(j = 0; j < texto.length; j++) wtexto[i] = wtexto[i] + texto.charAt(j) + b;
}
function animastatus() {
if (chars > -1) str = wtexto[chars];

else str = wtexto[0];
if (chars-- < -40) chars = 31;
status =
str;
clearTimeout(tempo);
tempo = setTimeout("animastatus()", 150);

}
animastatus()
</script>


Cambiando la barra de estado:
¿Querés que la barra de estado cambie cuando el mouse pase sobre los enlaces?
¡Es fácil! Podés hacer que cualquier mensaje aparezca en la barra de estado del navegador cuando
alguien pase el mouse sobre los enlaces de tu página. Observá cómo hacerlo acá:
Ejemplo- El código HTML de un enlace común se parece al siguiente ejemplo:


<a href=fotos.html>Fotos del Viaje</a>

Sólo tenés que incluir el siguiente código:
ONMOUSEOVER="window.status='COLOCA EL
TEXTO AQUI';return true;" ONMOUSEOUT="window.status='';return true;"

Código<a href=fotos.html ONMOUSEOVER="window.status='COLOCA EL TEXTO
AQUI';return true;" ONMOUSEOUT="window.status='';return true;">Fotos del
Viaje</a>

Impide seleccionar el contenido de una pagina ya sean imágenes o texto.
Con ello evitas que te las puedan copiar.


<head>
<title>Impide seleccionar el contenido de una
pagina</title>
<script language="Javascript">
function
disableselect(e){
return false
}
function reEnable(){
return
true
}
document.onselectstart=new Function ("return false"
if (window.sidebar){

document.onmousedown=disableselect
document.onclick=reEnable
}

</script>
</head>

Este script impide que el teclado pueda ser utilizado.
Con ello puede evitar, por ejemplo, que se usen las teclas Control+C para copiar el contenido de tu
pagina.


<head>
<title>Teclado bloqueado</title>

<SCRIPT language=JavaScript>
function shant()
{

alert('Esta pagina no te permite usar el teclado, lo siento')
}

document.onkeydown=shant;
</SCRIPT>
</head>

Dificultar copia de página:


<Script language=JavaScript>
function right(e) {
if
(navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){

alert("Coloca el mensaje aquí.";
return false;
}

else if (navigator.appName == 'Microsoft Internet Explorer' &&

(event.button == 2 || event.button == 3)) {
alert("Coloca el mensaje
aquí";
return false;
}

return true;
}
document.onmousedown=right;
if
(document.layers) window.captureEvents(Event.MOUSEDOWN);

window.onmousedown=right;
</script>

clic derecho cancelado

<script LANGUAGE="JavaScript1.1">

<!-- Adaptado por
Tk: Compatible con IE y NS -->

function derecha(e) {
if
(navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){

alert('Botón derecho inhabilitado')
return false;
}

else
if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2)){
alert('Botón derecho inhabilitado')
}
}

document.onmousedown=derecha
</script>

Abrir una Web en Pop Up:


<script
language='JavaScript'>window.open('http://www.chenico.com', 'geoflotante',
'');</script>

Utilizar enter para tabular en paginas web

<script languaje="Javascript"// este script hace que tabule el enter !!!
function tabular(e,obj)
        {
            
tecla=(document.all) ? e.keyCode e.which;
            if(
tecla!=13) return;
            
frm=obj.form;
            for(
i=0;i<frm.elements.length;i++)
                if(
frm.elements[i]==obj)
                {
                    if (
i==frm.elements.length-1)
                        
i=-1;
                    break
                }
            
/*ACA ESTA EL CAMBIO*/
            
if (frm.elements[i+1].disabled ==true )   
                
tabular(e,frm.elements[i+1]);
            else 
frm.elements[i+1].focus();
            return 
false;
        } 

</script>


<body onLoad="document.getElementById('veni').focus();">

Nombre:
<input type="text" size=25 tabindex=1 name="nombre" id="veni" onkeypress="return tabular(event,this)"><br>
Unidad:
<input type="text" size=8 tabindex=2 name="unidad" onkeypress="return tabular(event,this)"><br> 


La etiqueta veni, hace que el cursor aparezca ahi cuando carga la pagina

Saber que objeto tiene el cursor

<script type="text/javascript">
var activeElement;
function blurFunc(){
activeElement = null; /* Cuando el elemento deja de estar activo el elemento activo pasa a ser nulo (null) */
}

function focusFunc(evento){
if(!evento){ // Para IE
evento = window.event;
activeElement = evento.srcElement; /* Cuando un elemento se activa (focus) lo indicamos */
}
else{ // Para otros navegadores
activeElement = evento.target;
}
alert(activeElement.name); // Lo utilizaremos para hacer la prueba
}

function init() {
for (var i = 0; i < document.forms.length; i++) {
for(var j = 0; j < document.forms[i].elements.length; j++) {
document.forms[i].elements[j].onfocus = focusFunc;
document.forms[i].elements[j].onblur = blurFunc;
}
}
}

window.onload = init;
</script>

<body>
<form name="WebTaller" action="">
Nombre: <input type="text" name="nombre">
Apellidos: <input type="text" name="apellidos">
</form>
</body>

Posicion de cursor dentro de un Input Text

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function getPosCaret(input){
var range = document.selection.createRange();
var range2 = input.createTextRange();
range2.collapse(true);
range2.moveEnd('character', 0);
range2.setEndPoint('EndToStart', range);
distancia=range2.text.length
pos_final=parseFloat(input.value.length)- parseFloat(distancia)
range2.move('character', pos_final)
return pos_final;
}
</script>
</head>
<body>
<form name="formulario">
<input type="text" name="txt_cursor" value="123456" onkeypress="alert(getPosCaret(this))" style="text-align='right'">
</form>
</body>
</html>

Posición del cursor en una página

<html>
<head>
<script type="text/javascript">
var foco='';
</script>
</head>
<body>
<input type="text" id="txt1" onfocus = "foco=this.id" />
<input type="text" id="txt2" onfocus = "foco=this.id" />
<input type="button" onclick="alert(foco)" />
</body>
</html>

lunes, 4 de enero de 2010

Marcar todos los CheckBox

<script>
function marcar(p,f){
for(ii=0;n=f.elements[ii];ii++){
if(n.type=="checkbox")n.checked=p
}

</script>
  

<body> 
<form id="form1" name="form1" method="post" action=""> 
<input name="uno" type="checkbox" id="uno" value="checkbox" /<
uno<br/> 

<input name="dos" type="checkbox" id="dos" value="checkbox" />
dos<br/> 

<input name="tres" type="checkbox" id="tres" value="checkbox" />
tres<br /> 

<input name="cuatro" type="checkbox" id="cuatro" value="checkbox" />
cuatro<br /> 

<input type="button" name="Submit" value="todos" onclick="marcar(1,this.form)" /> 
<input type="button" name="Submit2" value="ninguno" onclick="marcar(0,this.form)" /> 
</form> 
</body>

lunes, 21 de diciembre de 2009

Habilitar y deshabilitar

<html>

<
head>
<
script type="text/javascript">
function 
habilitar(obj) {

  var 
hab;
  
frm=obj.form;
  
num=obj.selectedIndex;
  if (
num==1hab=true;
  else if (
num==2hab=false;
  
frm.sueldo.disabled=hab;
  
frm.nombre.disabled=hab;
}

</script>

</head>
<body>
<form>

<select onchange="habilitar(this)">
<option>trabaja</option>
<option>no trabaja</option>
<option>independiente</option>
</select>
<input type="text" name="sueldo" />
<input type="text" name="nombre" />
</body>
</html> 

Eventos en JavaScript

En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.
La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versión a partir de la cual están soportados y su significado.



Manejador
Versión
Se produce cuando...
onAbort
1.1
El usuario interrumpe la carga de una
imagen
onBlur
1.0
Un elemento de formulario, una ventana o
un marco pierden el foco
onChange
1.0 (1.1 para FileUpload)
El valor de un campo de formulario
cambia
onClick
1.0
Se hace click en un objeto o
formulario
onDblClick
1.2 (no en Mac)
Se hace click doble en un objeto
o formulario
onDragDrop
1.2
El usuario arrastra y suelta un objeto en
la ventana
onError
1.1
La carga de un documento o imagen produce
un error
onFocus
1.1 (1.2 para Layer)
Una ventana, marco o elemento de
formulario recibe el foco
onKeyDown
1.2
El usuario pulsa una tecla
onKeyPress
1.2
El usuario mantiene pulsada una
tecla
onKeyUp
1.2
El usuario libera una tecla
onLoad
1.0 (1.1 para image)
El navegador termina la carga de una
ventana
onMouseDown
1.2
El usuario pulsa un botón del ratón
onMouseMove
1.2
El usuario mueve el puntero
onMouseOut
1.1
El puntero abando una área o enlace
onMouseOver
1.0 (1.1 para area)
El puntero entra en una área o
imagen
onMouseUp
1.2
El usuario libera un botón del
ratón
onMove
1.2
Se mueve una ventana o un marco
onReset
1.1
El usuario limpia un formulario
onResize
1.2
Se cambia el tamaño de una ventana o
marco
onSelect
1.0
Se selecciona el texto del campo texto o
área de texto de un formulario
onSubmit
1.0
El usuario envía un formulario
onUnload
1.0
El usuario abandona una
página



Ejemplo de evento:
<INPUT TYPE="text" onChange="CompruebaCampo(this)">
En este ejemplo, CompruebaCampo() es una función JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la función (en este caso, el campo del formulario).
La siguiente tabla muestra los eventos que pueden utilizarse con los objetos del modelo de objetos JavaScript del Navigator.



Manejador de evento
Objetos para los que está
definido
onAbort
Image
onBlur
Button, Checkbox, FileUpload, Layer,
Password, Radio, Reset, Select, Submit, Text, Textarea,
window

onChange
FileUpload, Select, Text,
Textarea

onClick
Button, document, Checkbox, Link,
Radio, Reset, Submit

onDblClick
document, Link
onDragDrop
window
onError
Image, window
onFocus
Button, Checkbox, FileUpload, Layer,
Password, Radio, Reset, Select, Submit, Text, Textarea,
window

onKeyDown
document, Image, Link,
Textarea

onKeyPress
document, Image, Link,
Textarea

onKeyUp
document, Image, Link,
Textarea

onLoad
Image, Layer, window
onMouseDown
Button, document, Link
onMouseMove
Ninguno (debe asociarse a uno)
onMouseOut
Layer, Link
onMouseOver
Layer, Link
onMouseUp
Button, document, Link
onMove
window
onReset
Form
onResize
window
onSelect
Text, Textarea
onSubmit
Form
onUnload
window



2. Métodos de evento disponibles en JavaScript

Los siguientes métodos de evento pueden utilizarse en JavaScript:



Métodos de evento
Función que realizan
blur()
Elimina el foco del objeto desde el que
se llame
click()
Simula la realización de un
click sobre el objeto desde el que se llame
focus()
Lleva el foco al objeto desde el que se
llame
select()
Selecciona el área de texto del campo
desde el que se llame
submit()
Realiza el envío del formulario desde el
que se llame



Ejemplo:
<HTML>
<HEAD><TITLE>Eventos</TITLE>
<SCRIPT>
<!--
function
Reacciona(campo) {
    alert("¡Introduzca un valor!")

    campo.focus()
}
//-->

</SCRIPT></HEAD>
<BODY> <FORM
METHOD=POST>
<INPUT TYPE=text NAME=campo
onFocus="Reacciona(this)">
</FORM> </BODY>
</HTML>

3. Eventos onLoad y onUnload

Se usan como atributos del tag <BODY> de HTML.
Ejemplo:
<BODY onLoad="Hola()" onUnload="Adios()">
La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al abandonarla.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo onLoad
y onUnload</TITLE>
</HEAD>
<BODY
onLoad="alert('¡Bienvenido a mi página!')" onUnload="alert('¡Vuelva
pronto!')">
...
</BODY>
</HTML>
En este otro ejemplo se utilizan funciones:
<HTML>
<HEAD>
<TITLE>Ejemplo con
funciones</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
<!--
var name = ""
function Hola()
{
    nombre = prompt('Introduzca su
nombre:','')
    alert('¡Hola ' + nombre +
'!')
}

function Adios() {
    alert('¡Adios
' + nombre +
'!')
}
//-->
</SCRIPT>
</HEAD>
<BODY
onLoad="Hola()"
onUnload="Adios()">
...
</BODY>
</HTML>

4. Ejemplo de aplicación en formularios

Vamos a ver un ejemplo para un campo de texto:
<INPUT TYPE=text NAME="test" onBlur="alert('¡Gracias!')"
onChange="Comprueba(this)">
En este ejemplo, simulamos una calculadora interactiva:
<HTML>
<HEAD><TITLE>Calculadora
interactiva</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
<!--
function Calcula(form)
{
    form.resultados.value =
eval(form.entrada.value)
}

function CogeExpresion(form)
{
    form.entrada.blur()
   
form.entrada.value = prompt("Introduce una expresión matemática válida
en JavaScript","")
    Calcula(form)
}
//-->
</SCRIPT></HEAD> <BODY> <FORM
METHOD=POST>
Calculadora interactiva:
<INPUT TYPE=text
NAME="entrada" VALUE=""
onFocus="CogeExpresion(this.form)">
<BR>El resultado
es:<INPUT TYPE=text NAME="resultados" VALUE=""
onFocus="this.blur()">
</FORM> </BODY> </HTML>

CheckBox Dinámicos


Código PHP:


<form action="apuntarse_eventos.php" method="post">
<?
$i 
0;
while (
$i 10){
?>
Evento <? echo $i?>: <input type="checkbox" name="eleccion[]" id="eleccion<? echo $i?>" value="<? echo $i?>" /><br />
<? $i++; } ?>
<input type="submit" name="boton" value="Confirmar" />
</form>




apuntarse_eventos.php:

Código PHP:


<?
if(isset($_POST['eleccion'])){
    for(
$i 0$i count($_POST['eleccion']); $i++){
        
$sql "INSERT INTO tbl_quiera_asistir_a (id_evento) VALUES ("$_POST['eleccion'][$i] .")";
        echo 
$sql "<br />";//completar el codigo grabar en la bd Mysql
    }
}
?>


sábado, 19 de diciembre de 2009

Saber si CheckBox esta seleccionado

<html>
<head>

<script>
function comprobarCheckBox(){
if
(document.frm.checkbox1.checked)
alert("PrimeroCheckeado");
if
(document.frm.checkbox2.checked)
alert("SegundoCheckeado");
}
</script>
</head>
<body>
<form
name="frm">
<input type="checkBox" id="checkbox1" value="checkbox1" name="st">Selection A<br>
<input type="checkBox" id="checkbox2" value="checkbox2">Selection B<br>

<input type="button" value="Comprobar" onClick="comprobarCheckBox()">
</form>
</body>
</html>

Cambiar color de boton (input) en Html

<html>
<head>
<title> Cambiar colores </title>

<style type="text/css">

input { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #7F99D4; border: #000099; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; cursor: hand}
</style>

<script language="JavaScript">
<!--
function cambiar(b,bg,tx){
b.style.backgroundColor = bg;
b.style.color = tx;

}
//-->
</script>
</head>
<body>

<input type="button" name="bot" value="Mi Boton" onMouseOver="cambiar(this,'#CCAAFF','#000000')" onMouseOut="cambiar(this,'#7F99D4','#FFFFFF')"><br>
</body>
</html>

Script para modificar la apariencia del mensaje de Alerta en la Web

// constantes para definir el título de la alerta y el texto del botón.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
// sobre el método de recorrido de alerta sólo si esta un nuevo navegador.
// navegador antiguos véase los standares de alertas
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}

function createCustomAlert(txt) {
// referencia al acceso directo del documento del objeto
d = document;
// si el objeto modalContainer ya existe en el DOM, retorna la libertad.
if(d.getElementById("modalContainer")) return;
// crear el div modalContainer como un hijo del elemento BODY
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// asegurarse de que tan alto como tiene que ser la superposición con todo el contenido de la página
mObj.style.height = document.documentElement.scrollHeight + "px";
// crear el DIV que será la alerta 
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE no intenta la posición: fija correctamente, así que esto compensa el posicionamiento de la alerta
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// centro del cuadro de alerta
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// crear un elemento H1 como la barra de título
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// crear un elemento de párrafo que contiene el argumento txt
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// crear un elemento de anclaje que se utiliza como botón de confirmación.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// establecer el evento onclick para quitar la alerta cuando el ancla se hace clic.
btn.onclick = function() { removeCustomAlert();return false; }
}

// elimina la alerta personalizada del DOM.
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}

Métodos y propiedades HTML

getElementById (Identificador)
(DOM Núcleo: Método de Document) Devuelve el nodo Elemento cuyo
id es Identificador.
getElementsByTagName (Nombre)
(DOM Núcleo: Método de Document) Devuelve una lista ordenada de
todos los nodos Element que tengan como nombre de etiqueta Nombre.
createElement (Tipo)
(DOM Núcleo: Método de Document) Crea un nodo tipo Element del
tipo especificado en Tipo.
createTextNode (Cadena)
(DOM Núcleo: Método de Document) Crea un nodo tipo Text con el
valor Cadena.
appendChild (nuevoNodo)
(DOM Núcleo: Método de Node) Añade el nodo nuevoNodo al
final del conjunto de hijos del nodo al que se aplica.
removeChild (Nodo)
(DOM Núcleo: Método de Node) Retira Nodo del conjunto de
hijos del nodo al que se aplica.
attributes
(DOM Núcleo: Atributo de Node) Devuelve un conjunto desordenado
de atributos del nodo dado.
getNamedItem (Nombre)
(DOM Núcleo: Método de NamedNodeMap) Obtiene el valor del
atributo especificado por Nombre.
value
(DOM Núcleo: Atributo de Attr) Devuelve la cadena del valor del
atributo.
getAttribute (Nombre)
(DOM Núcleo: Método de Element) Devuelve el valor del atributo
Nombre.
setAttribute (Nombre, Valor)
(DOM Núcleo: Método de Element) Añade al elemento un nuevo
atributo Nombre, estableciendo Valor.
images
(DOM HTML: Atributo de HTMLDocument) El conjunto ordenado de
elementos HTMLImageElement del documento.
className
(DOM HTML: Atributo de HTMLElement) El valor asignado al atributo
class del elemento.
elements
(DOM HTML: Atributo de HTMLFormElement) Devuelve el conjunto
ordenado de elementos de control del formulario al que se aplica.
value
(DOM HTML: Atributo de HTMLInputElement) El contenido del control
de formulario correspondiente.
src
(DOM HTML: Atributo de HTMLImageElement) El URI del origen
de la imagen.
width
(DOM HTML: Atributo de HTMLImageElement) La anchura del elemento.
height
(DOM HTML: Atributo de HTMLImageElement) La altura del elemento.
insertRow (Número)
(DOM HTML: Método de HTMLTableSectionElement) Inserta en la
sección una fila vacía antes de la fila que ocupa el lugar Número.
deleteRow (Número)
(DOM HTML: Método de HTMLTableSectionElement) Elimina de la
sección la fila que ocupa el lugar Número.
insertCell (Número)
(DOM HTML: Método de HTMLTableRowElement) Inserta una celda en la
fila antes de la celda que ocupa el lugar Número.

martes, 15 de diciembre de 2009

Adicionar Filas a Tablas Dinamicamente mediante JavaScript

<html>

<
head>
<
title>

    
Tablas

</title>

<
script language=javaScript1.2>
function 
restar() {

    var 
miTabla document.getElementById("cuerpoTabla");

    var 
0;

    do

        if (
miTabla.rows[i].getElementsByTagName("input")[0].checked == true)

            
miTabla.deleteRow(i);

        else

            
++;

    while (
miTabla.rows.length != i)
}


function 
suma()    {

    var 
miTabla document.getElementById("cuerpoTabla");

    var 
fila document.createElement("tr");

    var 
celda1 document.createElement("td");

    var 
celda2 document.createElement("td");

    
celda1.innerHTML "hola b" + (miTabla.getElementsByTagName("tr").length 1).toString();

    
celda2.innerHTML "hola c" + (miTabla.getElementsByTagName("tr").length 1).toString() + "<input type=checkbox>";
    
fila.appendChild(celda1);

    
fila.appendChild(celda2);

    
miTabla.appendChild(fila);
}



</script>

</head>

<body style="color:blue" > 
<script>

document.write(document.body.style[0]);
</script>

<table id=unaTabla border=1>

<tbody id=cuerpoTabla>

     <tr id=a1>

          <td id=b1>hola b1</td>

          <td id=c1>hola c1<input type=checkbox></td>

     </tr>

     <tr id=a2>

          <td id=b2>hola b2</td>

          <td id=c2>hola c2<input type=checkbox></td>

     </tr>
</table>

<button onclick=sube()>subir</button>

<button onclick=suma()>sumar</button>


</body> 
</html>