cambiar borde celda DOM onmouseover - problemas

Discussion in 'Javascript' started by LuisDavid, Jun 3, 2009.

  1. LuisDavid

    LuisDavid Guest

    Hola grupo, buen dia, quisiera plantearles un problemilla que tengo;
    tengo este codigo:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <title>Celdas</title>
    <script language="javascript" type="text/javascript" src="prueba.js">
    <!--
    function resalta(elEvento){
    var evento = elEvento || window.event;
    var elDiv = document.getElementById("seccion");
    var tds = elDiv.getElementsByTagName("td");
    switch (evento.type){
    case 'mouseover':
    for(var i=0;i<tds.length;i++){
    tds.className = "tdclass";
    }
    break;
    case 'mouseout':
    for(var i=0;i<tds.length;i++){
    tds.className = "";
    }
    break;
    }
    }

    window.onload = function (){
    document.getElementById("seccion").onmouseover = resalta;
    document.getElementById("seccion").onmouseout = resalta;
    }
    -->
    </script>
    <style type="text/css">
    td{border:thin solid silver;}
    ..tdclass{border:thin solid red;}
    </style>
    </head>

    <body>
    <table id="seccion" width="200" height="200" border="0">
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
    ---------------------------------------------------------------------------------------------------
    Ahora lo que quiero, es que cambie el borde celda por celda, NO todas
    a la vez.
    he buscado en la red pero encuentro cosas asi:

    <td onmouseover="...." onmouseout="...".....etc,etc.

    (no me gusta mezclar javascript con HTML), asi seria facil, pero que
    pasaria si tubiera una tabla de 20 celdas (etiquetas TD).
    Lo que quiero es usar las funciones DOM para cambiar de estilos, pero
    porque no me sale?.
    con la funcion getElementsByTagName("td"), que esta mal???, ayuda!!!!.
    gracias por la ayuda que puedan brindar.
     
    LuisDavid, Jun 3, 2009
    #1
    1. Advertising

  2. LuisDavid

    Jorge Guest

    On Jun 3, 10:35 pm, LuisDavid <> wrote:
    > (...)
    > Ahora lo que quiero, es que cambie el borde celda por celda, NO todas
    > a la vez.
    > (...)


    Hola,

    Primero has de averiguar qué elemento ha originado el evento (*), y
    sólo si es un TD le aplicas el estilo:

    <script type="text/javascript">
    window.onload= function () {

    function resalta (elEvento) {
    var evento = elEvento || window.event;
    var target= evento.target || evento.srcElement;

    if (target.nodeName === "TD") {
    switch (evento.type){
    case 'mouseover':
    target.className = "tdclass";
    break;
    case 'mouseout':
    target.className = "";
    break;
    }
    }
    }

    var seccion= document.getElementById("seccion");
    seccion.onmouseover= seccion.onmouseout= resalta;
    };
    </script>

    ....por que todos los elementos contenidos en la tabla (tbody, tr, td)
    también van a generar eventos al entrar/salir de ellos con el ratón,
    así que te hace falta asegurarte de que solo le tocas el estilo si es
    un td que son los que te interesan. Quita si quieres el if
    (target.nodeName === "TD") para experimentar con ésto.

    Espero que te sirva.

    (*)http://www.quirksmode.org/js/events_properties.html
    --
    Jorge.
     
    Jorge, Jun 3, 2009
    #2
    1. Advertising

  3. LuisDavid

    Jorge Guest

    On Jun 3, 11:39 pm, Jorge <> wrote:
    > (...)
    >       if (target.nodeName === "TD") {
    > (...)


    if (target.tagName === "TD") {
    ^^^^^^^
    --
    Jorge.
     
    Jorge, Jun 4, 2009
    #3
  4. LuisDavid wrote:

    > <script language="javascript" type="text/javascript" src="prueba.js">
    > <!--
    > function resalta(elEvento){

    [snip]

    El codigo dentro del elemento (function resalta(elEvento) y lo que sige)
    no es usado, si usas el attributo src (src="prueba.js"). Es uno o el
    otro. Ahora tu codigo equivale a:

    <script type="text/javascript" src="prueba.js"></script>

    El attributo language y los comentarios son obsoletos.

    Saludos,
    Osmo
     
    Osmo Saarikumpu, Jun 4, 2009
    #4
  5. LuisDavid

    Jorge Guest

    On Jun 4, 10:52 am, Osmo Saarikumpu <> wrote:
    > (...)
    > El codigo dentro del elemento (function resalta(elEvento) y lo que sige)
    > no es usado, si usas el attributo src (src="prueba.js"). Es uno o el
    > otro. Ahora tu codigo equivale a:
    >
    > <script type="text/javascript" src="prueba.js"></script>
    > (...)


    Cierto, es verdad. Aunque supongo que simplemente se le olvidó borrar
    el src="prueba.js" al editarlo.

    --
    Jorge.
     
    Jorge, Jun 4, 2009
    #5
  6. LuisDavid

    LuisDavid Guest

    Ok Jorge Mira es justo lo que queria, funciona; ahora como puedo
    aplicarle para que funcione con onClick, me explico, la idea que tengo
    es esta:
    -------------------------------------------------------------------+
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
    www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <title>Celdas</title>
    <script type="text/javascript">
    <!--
    window.onload = function(){
    function resalta(elEvento){
    var evento = elEvento || window.event;
    var target = evento.target || evento.srcElement;
    if(target.nodeName === "TD"){
    switch(evento.type){
    case 'mouseover':
    (target.className == "")?target.className = "tdclass":
    (target.className == "classtd")?target.className =
    "classtd":target.className = "";
    break;
    case 'mouseout':
    (target.className == "tdclass")?target.className = "":
    (target.className == "classtd")?target.className =
    "classtd":target.className = "";
    break;
    case 'click':
    (target.className == "tdclass")?target.className = "classtd":
    (target.className == "classtd")?target.className =
    "classtd":target.className = "";
    break;
    }
    }
    }
    var seccion = document.getElementById("seccion");
    seccion.onmouseover = seccion.onmouseout = seccion.onclick = resalta;
    }
    -->
    </script>
    <style type="text/css">
    td{border:thin solid silver;}
    ..tdclass{border:thin solid red;}
    ..classtd{background-color:#CCCCCC;}
    </style>
    </head>

    <body>
    <table id="seccion" width="200" border="0" cellpadding="0"
    cellspacing="0">
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
    ----------------------------------------------------------------------------------------
    lo que quiero es que al hacer click, quede marcado el backGround de la
    etiqueta TD, y al hacer click en otra TD quede marcado esta y la
    anterior ya no. osea una a una, y NO que queden marcadas todas a la
    vez.
    a ver si me echas una mano. gracias por tu colaboracion, un saludo.
     
    LuisDavid, Jun 25, 2009
    #6
  7. LuisDavid

    SAM Guest

    Le 6/25/09 1:16 AM, LuisDavid a écrit :
    > lo que quiero es que al hacer click, quede marcado el backGround de la
    > etiqueta TD, y al hacer click en otra TD quede marcado esta y la
    > anterior ya no. osea una a una, y NO que queden marcadas todas a la
    > vez.
    > a ver si me echas una mano. gracias por tu colaboracion, un saludo.


    you need in first to delete class from all the Tds
    then you can add a class to the clicked/overed TD


    CSS :

    td { background: #ffc }
    ..tdclass { background: #eee } /* clic */
    ..tdclass.classtd { background: #ccc } /* clicado over */
    ..classtd { background: #ff0 } /* normal over */


    Se ha de eliminar las classes de todos los TDs
    pues de dar la class al clicado TD

    Por los TDs que se ha hecho clicado, se puede agregar una oltra clase a
    la existente o no.

    JS :

    function clearTable() {
    var t = document.getElementById('seccion');
    t = t.document.getElementsByTagName('TD');
    var n = t.length;
    if(n)
    while(n--) t[n].className = '';
    }

    function resalta(elEvento){
    ... / ...
    switch(evento.type){
    case 'click':
    {
    clearTable();
    target.className = "tdclass"?;
    };
    break;
    case 'mouseover':
    target.className = target.className=="tdclass"?
    'tdclass classtd' : 'classtd';
    break;
    case 'mouseout':
    target.className = target.className=='classtd'?
    '' : 'tdclass';
    break;
    }
    .... / ...
    }


    --
    sm
     
    SAM, Jun 25, 2009
    #7
  8. On 25 jun, 01:16, LuisDavid <> wrote:
    > Ok Jorge Mira es justo lo que queria, funciona; ahora como puedo
    > aplicarle para que funcione con onClick, me explico, la idea que tengo
    > es esta:
    > -------------------------------------------------------------------+
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <head>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">
    > <title>Celdas</title>
    > <script type="text/javascript">
    > <!--
    > window.onload = function(){
    >         function resalta(elEvento){
    >                 var evento = elEvento || window.event;
    >                 var target = evento.target || evento.srcElement;
    >                 if(target.nodeName === "TD"){
    >                         switch(evento.type){
    >                                 case 'mouseover':
    >                                 (target.className == "")?target.className = "tdclass":
    > (target.className == "classtd")?target.className =
    > "classtd":target.className = "";
    >                                 break;
    >                                 case 'mouseout':
    >                                 (target.className == "tdclass")?target.className = "":
    > (target.className == "classtd")?target.className =
    > "classtd":target.className = "";
    >                                 break;
    >                                 case 'click':
    >                                 (target.className == "tdclass")?target.className = "classtd":
    > (target.className == "classtd")?target.className =
    > "classtd":target.className = "";
    >                                 break;
    >                         }
    >                 }
    >         }
    >         var seccion = document.getElementById("seccion");
    >         seccion.onmouseover = seccion.onmouseout = seccion.onclick = resalta;}
    >
    > -->
    > </script>
    > <style type="text/css">
    > td{border:thin solid silver;}
    > .tdclass{border:thin solid red;}
    > .classtd{background-color:#CCCCCC;}
    > </style>
    > </head>
    >
    > <body>
    > <table id="seccion" width="200" border="0" cellpadding="0"
    > cellspacing="0">
    >   <tr>
    >     <td>&nbsp;</td>
    >   </tr>
    >   <tr>
    >     <td>&nbsp;</td>
    >   </tr>
    >   <tr>
    >     <td>&nbsp;</td>
    >   </tr>
    > </table>
    > </body>
    > </html>
    > --------------------------------------------------------------------------- -------------
    > lo que quiero es que al hacer click, quede marcado el backGround de la
    > etiqueta TD, y al hacer click en otra TD quede marcado esta y la
    > anterior ya no. osea una a una, y NO que queden marcadas todas a la
    > vez.
    > a ver si me echas una mano. gracias por tu colaboracion, un saludo.


    'OnClick' pudo sentir un pedacito artificial; es quizá mejor utilizar
    'onMouseout' y 'onMouseup' ?

    <td

    style="border: 1px solid silver; background-color: transparent;"

    onMouseover="this.style.border='1px solid red';
    this.style.backgroundColor='transparent';"

    onMousedown="this.style.border='1px solid black';
    this.style.backgroundColor='#CCCCCC';"

    onMouseout="this.style.border='1px solid silver';
    this.style.backgroundColor='transparent';"

    onMouseup="this.style.border='1px solid red';
    this.style.backgroundColor='transparent';"
    >



    Espero que esto ayude,

    --
    Bart
     
    Bart Van der Donck, Jun 25, 2009
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vicent
    Replies:
    2
    Views:
    798
    Kevin Goodsell
    Oct 4, 2003
  2. liroforo
    Replies:
    0
    Views:
    1,638
    liroforo
    Oct 16, 2007
  3. Daniel
    Replies:
    5
    Views:
    184
    Daniel Sánchez
    Jun 3, 2007
  4. LuisDavid
    Replies:
    0
    Views:
    375
    LuisDavid
    Nov 11, 2008
  5. LuisDavid
    Replies:
    1
    Views:
    169
    Evertjan.
    Jul 12, 2009
Loading...

Share This Page