Iniciante.Executar Script após carregamento da página

[noobest 0]

Olá,

Sou iniciante em linguagem javascript e estou com uma dúvida referente a eventos em javaScript.

Preciso que um evento ocorra após o carregamento da página.

 

Este código realiza a filtragem de dados em uma tabela.

Assim quando o usuario digita um valor ele traz a linha referente ao dado digitado

Pórem gostaria que esse valor estivesse pré determinado, assim quando a página é carregada a filtragem já estaria feita. Para isso, colocaria um VALUE no Input.

 

SCRIPT

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>


$(function(){
    $("#tabela input").keyup(function(){       
        var index = $(this).parent().index();
        var nth = "#tabela td:nth-child("+(index+1).toString()+")";
        var valor = $(this).val().toUpperCase();
        $("#tabela tbody tr").show();
        $(nth).each(function(){
            if($(this).text().toUpperCase().indexOf(valor) < 0){
                $(this).parent().hide();
            }
        });
    });


    $("#tabela input").blur(function(){
        $(this).val("");
    });
});
</script>

HTML

 

<table border="1" id="tabela">
    <thead>
    <tr>
        <th>Nome</th>
        <th>Idade</th></tr><tr>
                    <th><input type="text" id="txtColuna1" /></th>
                    <th><input type="text" id="txtColuna2"/></th>
</tr>
</thead>
<tbody>  <tr>
        <th>Fulano</th>
        <th>18</th>  </tr>  <tr>
        <th>Sicrano</th>
        <th>20</th>  </tr>    </tbody>
</table>

Obrigado. =D

[fabricionaweb 0]

Eu não consegui entender exatamente o que você quer, mas tentarei te ajudar com o que eu pude entender...

http://api.jquery.com/ready/

O método ready do jQuery registra uma função a ser executadas após o carregamento da página, normalmente usado com função anônima. No seu código você já está usando um alias para ela (é citado no link acima):

$(function(){

Nativamente, o javascript tem o evento load que você pode registrar usando o método addEventListener

https://developer.mozilla.org/pt-BR/docs/DOM/element.addEventListener

É a mesma coisa que o jQuery faz, só mencionei caso voce goste de entender o javascript puro. Eu gosto :P

Veja se isso te ajuda..

[noobest 0]

Eu não consegui entender exatamente o que você quer, mas tentarei te ajudar com o que eu pude entender...

 

http://api.jquery.com/ready/

 

O método ready do jQuery registra uma função a ser executadas após o carregamento da página, normalmente usado com função anônima. No seu código você já está usando um alias para ela (é citado no link acima):

 

$(function(){

 

Nativamente, o javascript tem o evento load que você pode registrar usando o método addEventListener

 

https://developer.mozilla.org/pt-BR/docs/DOM/element.addEventListener

 

É a mesma coisa que o jQuery faz, só mencionei caso voce goste de entender o javascript puro. Eu gosto :P

 

Veja se isso te ajuda..

 

Olá, obrigado pela resposta...

Em meu Script utilizo o enveto KeyUp, que executará os camando confome o usuario digita o valor desejado, porém, preciso substituir este evento para outro, pois o valor que quero encontrar já vai estar no input, sem ação do usuário.

[fabricionaweb 0]

Certo, vou ir comentando seu código para que entenda o que está acontecendo...

$(function(){ // este é o evento de onload, todo código aqui dentro só será executado após o carregamento do dom
    $("#tabela input").keyup(function(){ // evento de keyup, codigo aqui dentro será executado ao soltar uma tecla, dentro do seletor '#tabela input'
        var index = $(this).parent().index();
        var nth = "#tabela td:nth-child("+(index+1).toString()+")";
        var valor = $(this).val().toUpperCase();
        $("#tabela tbody tr").show();
        $(nth).each(function(){
            if($(this).text().toUpperCase().indexOf(valor) < 0){
                $(this).parent().hide();
            }
        });
    });


    $("#tabela input").blur(function(){ // registra o evento blur, o codigo será executado quando o seletor '#tabela input' perder o foco
        $(this).val("");
    });
});

A melhor maneira de registra eventos com jQuery é usando o metodo on()

https://api.jquery.com/on/

O seu código ficaria assim:

$(function(){ // este é o evento de onload, todo código aqui dentro só será executado após o carregamento do dom
    $("#tabela").on('keyup', 'input', function() { // evento de keyup, codigo aqui dentro será executado ao soltar uma tecla, dentro do seletor '#tabela input'
        var index = $(this).parent().index();
        var nth = "#tabela td:nth-child("+(index+1).toString()+")";
        var valor = $(this).val().toUpperCase();
        $("#tabela tbody tr").show();
        $(nth).each(function(){
            if($(this).text().toUpperCase().indexOf(valor) < 0){
                $(this).parent().hide();
            }
        });
    });


    $("#tabela").on('blur', 'input', function() { // registra o evento blur, o codigo será executado quando o seletor '#tabela input' perder o foco
        $(this).val("");
    });
});

Agora eu preciso entender qual evento voce quer dispare a função...

[reebr 94]

Após o carregamento de toda a página? Incluindo objetos, imagens, etc?

$(document).load(function(){
      // código
});

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/