trabajar con tablas en jquery

laurika04 · #1 (**permalink**) 05/12/2011, 14:50

Hola!
Me puede ayudar alguien con algo de codigo o con algunos consejos? Es que soy nueva en la programacion web y no tengo ni idea como tengo que trabajar con las tabals....
Tengo que implementar el siguente problema usando jquery:
una matriz que contiene un numero par de elementos esta representada de una tabla que contiene parejas de numeros que estan al principio ascondidos. Cuando el usuario hace click en 2 casillas que contienen numeros iguales, esos numeros se quedan visibles; si no son iguales se van a asconder otra vez. El juego se acaba cuando todos los numeros han sido enseñados.
Gracias!

kokoou · #2 (**permalink**) 05/12/2011, 16:26

Memotest?

Lo que puedes hacer es tener todos los divs que contengan números con "display:none", y cuando haces click en alguno, darle "display:block". Su equivalente en kquery serían los metodos "hide()" y "show()" respectivamente.

api.jquery.com

livemusic · #3 (**permalink**) 06/12/2011, 11:35

, me dio curiosidad resolver tu juego y me salio de la siguiente manera ..

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){   
    // click a la celda
    $("#live td").click(function(){
        // obtenemos el valor de la celda
        var val = $(this).attr("title");
        // recorremos la tabla para buscar
        $("#live td").each(function(){
            // obtenemos el valor de la celda 
            var compara = $(this).attr("title");
            // comparamos el valor de la celda de busqueda, con el valor de la celda almacenada
            if(val == compara){
                // muestra el valor de la celda comparada
                $(this).html(compara);
            }
        })
        // muestra el valor de la celda
        $(this).html(val);
    })  
})
</script>
<style type="text/css">
#live{ border: 1px solid; }
#live td{ width:15px; height:15px; border: 1px solid; }
</style>
</head>
<body>
<table id="live">
    <tr>
        <td title="2"></td>
        <td title="6"></td>
    </tr>
    <tr>
        <td title="3"></td>
        <td title="1"></td>
    </tr>
    <tr>
        <td title="4"></td>
        <td title="2"></td>
    </tr>
    <tr>
        <td title="7"></td>
        <td title="5"></td>
    </tr>
    <tr>
        <td title="6"></td>
        <td title="4"></td>
    </tr>
    <tr>
        <td title="5"></td>
        <td title="3"></td>
    </tr>
    <tr>
        <td title="1"></td>
        <td title="7"></td>
    </tr>
</table>
</body>
</html>

xD .. suerte

livemusic · #4 (**permalink**) 09/12/2011, 13:27

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 
var count = 0;
var valores = [];
 
$(function(){
    $("#live td").unbind("click").click(function(){
        var valor = $(this).attr("axis");
        clickPulsados(valor);
        $(this).html(valor);
    })
})
 
function clickPulsados(valor){
    if(valores.length < 2){
        valores.push(valor);
        count++;
        if(valores.length == 2){
            var val1 = valores[0];
            var val2 = valores[1];
            if(val1 == val2){
                $("#resultado").html('LiveMusic');
            }else{
                $("#resultado").html('Intentalo denuevo');
            }
            reinicializar();
        }
    }
}
 
function reinicializar(){
    count   = 0;
    valores = [];
}
</script>
<style type="text/css">
#container{ width:200px; margin:200px auto; }
#live{ border: 1px solid; width: 200px; }
#live td{ width:15px; height:15px; border: 1px solid; }
</style>
</head>
<body>
 
<div id="container">
    <div id="resultado"></div>
    <div id="table">
        <table id="live">
            <tr>
                <td axis="2">&nbsp;</td>
                <td axis="6">&nbsp;</td>
            </tr>
            <tr>
                <td axis="3">&nbsp;</td>
                <td axis="1">&nbsp;</td>
            </tr>
            <tr>
                <td axis="4">&nbsp;</td>
                <td axis="2">&nbsp;</td>
            </tr>
            <tr>
                <td axis="7">&nbsp;</td>
                <td axis="5">&nbsp;</td>
            </tr>
            <tr>
                <td axis="6">&nbsp;</td>
                <td axis="4">&nbsp;</td>
            </tr>
            <tr>
                <td axis="5">&nbsp;</td>
                <td axis="3">&nbsp;</td>
            </tr>
            <tr>
                <td axis="1">&nbsp;</td>
                <td axis="7">&nbsp;</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>