1

Olá, eu estou desenvolvendo um app de apostas de futebol que apresenta uma tabela com valores de cotações de diferentes modos de jogo para cada partida cadastrada. Para cada partida eu tenho uma tabela com o seguinte código:

<div id="partida_1" class="panel-heading-margin">
<table id="jogo_1" onclick="getTableClick()" class="w3-table-all w3-card-4 myTable" data-id="1" data-horario="05-05-2017 12:00:00" data-jogo="Barcelona X Real Madrid">
    <thead>
        <tr id="infopartida_1" class="w3-dark-grey">
            <th colspan="20">
                <small>Barcelona X Real Madrid</small>
                <span class="pull-right"><small>05-05-2017 12:00:00&nbsp; </small> <button id="removejogo_1" class="btn btn-danger btn-xs pull-right hidden" onclick="removeJogo(1)" ><span class="fa fa-close"></span></button></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-key="jogo_1_1" data-valorcotacao="1.4" data-nomecotacao="Casa" class="cotacao" style="text-align: center" width="200">Casa <br> <strong>1.4</strong></td>
            <td data-key="jogo_1_2" data-valorcotacao="1.2" data-nomecotacao="Empate" class="cotacao" style="text-align: center" width="200">Empate <br> <strong>1.2</strong></td>
            <td data-key="jogo_1_3" data-valorcotacao="1.1" data-nomecotacao="Fora" class="cotacao" style="text-align: center" width="200">Fora <br> <strong>1.1</strong></td>
        </tr>
        <tr>
            <td data-key="jogo_1_4" data-valorcotacao="2.1" data-nomecotacao="Ambas" class="cotacao" style="text-align: center" width="200">Ambas <br> <strong>2.1</strong></td>
            <td data-key="jogo_1_5" data-valorcotacao="5.4" data-nomecotacao="+2.5GM" class="cotacao" style="text-align: center" width="200">+2.5GM <br> <strong>5.4</strong></td>
            <td data-key="jogo_1_6" data-valorcotacao="2.1" data-nomecotacao="-2.5GM" class="cotacao" style="text-align: center" width="200">-2.5GM <br> <strong>2.1</strong></td>
        </tr>
        <tr>
            <td data-key="jogo_1_7" data-valorcotacao="2.1" data-nomecotacao="1.5GM" class="cotacao" style="text-align: center" width="200">1.5GM <br> <strong>2.1</strong></td>
            <td data-key="jogo_1_8" data-valorcotacao="2.1" data-nomecotacao="Casa ou Empate" class="cotacao" style="text-align: center" width="200">Casa ou Empate <br> <strong>2.1</strong></td>
            <td data-key="jogo_1_9" data-valorcotacao="2.1" data-nomecotacao="Fora ou Empate" class="cotacao" style="text-align: center" width="200">Fora ou Empate<br> <strong>2.1</strong></td>
        </tr>
        <tr>
            <td data-key="jogo_1_10" data-valorcotacao="1.23" data-nomecotacao="C. Marca" class="cotacao" style="text-align: center" width="200">C. Marca <br> <strong>1.23</strong></td>
            <td data-key="jogo_1_11" data-valorcotacao="1.23" data-nomecotacao="F. Marca" class="cotacao" style="text-align: center" width="200">F. Marca <br> <strong>1.23</strong></td>
            <td data-key="jogo_1_12" data-valorcotacao="1.23" data-nomecotacao="Casa ou Fora" class="cotacao" style="text-align: center" width="200">Casa ou Fora <br> <strong>1.23</strong></td>
        </tr>
        <tr>
            <td data-key="jogo_1_13" data-valorcotacao="1.45" data-nomecotacao="C. Vence F. Marca" class="cotacao" style="text-align: center" width="200">C. Venc. F. Marca <br> <strong>1.45</strong></td>
            <td data-key="jogo_1_14" data-valorcotacao="1.45" data-nomecotacao="F. Vence C. Marca" class="cotacao" style="text-align: center" width="200">F. Venc. C. Marca <br> <strong>1.45</strong></td>
            <td data-key="jogo_1_15" data-valorcotacao="1.45" data-nomecotacao="C. Venc. Zero" class="cotacao" style="text-align: center" width="200">C. Venc. Zero <br> <strong>1.45</strong></td>
        </tr>
        <tr>
            <td data-key="jogo_1_16" data-valorcotacao="1.1" data-nomecotacao="F. Venc. Zero" class="cotacao" style="text-align: center" width="200">F. Venc. Zero <br> <strong>1.1</strong></td>
        </tr>
    </tbody>                                       
</table>

E tenho a seguinte função para receber os clicks da tabela:

function getTableClick(){
$('.myTable tbody tr td').click(function () {
    //Valores passados pelo click na tabela
    var jogoId = $(this).closest('table').data('id');
    var cotacao = $(this).data('nomecotacao');
    var partida = $(this).closest('table').data('jogo');
    var valorCotacao = $(this).data('valorcotacao');

    $(this).addClass('selected-cell');
    $(this).parents('tbody').find('td').not(this).removeClass('selected-cell');
    $('#removejogo_' + jogoId).removeClass('hidden');
    $('#parcialApostas').removeClass('hidden');
    $('#infopartida_' + jogoId).removeClass('w3-dark-grey');
    $('#infopartida_' + jogoId).addClass('w3-green');            

    //Teste
    alert(cotacao + ': ' + valorCotacao);

    //Inclui o jogo clicado na tabela.
    /*$('#modalBody').append(
        '<tr id="tr_133" data-jogo="'+ partida +'" data-key="'+ cotacao +'" > \
            <td> \
                <p>'+ partida +'<span class="pull-right">R$'+ valorCotacao +'</span></p> \
            </td> \
        </tr>'
    );*/
});}

Quando a tabela é renderizada eu eu clico nela pela primeira vez a função não é executada, somente no segundo click. Além disso quando eu clico novamente em uma célula a função é executada duas vezes, se eu clico novamente executa três vezes e assim por diante. Se alguém puder me ajudar à achar o erro eu agraço imensamente.

2
  • Qual é a ideia de getTableClick? quando queres que seja executada?
    – Sergio
    8/01/2017 às 15:14
  • Sempre que o usuário clicar em uma das células de uma das tabelas. 8/01/2017 às 15:37

1 Resposta 1

0

Quando tens no HTML <table id="jogo_1" onclick="getTableClick(this, event);" isso vai fazer que a função seja corrida quando houver um clique no elemento table ou num dos seus descendentes.

Exemplo:

function minhaFuncao(table, evento) {
  console.log(table, evento.target);
}
table th,
table td {
  padding: 0.8em;
  border: 1px solid;
}

table th {
  background-color: #6699FF;
  font-weight: bold;
}

table th:hover,
table td:hover {
  background-color: #ddf;
  cursor: pointer;
}
<table onclick="minhaFuncao(this, event);">
  <tr>
    <th>#</th>
    <th>Coluna A</th>
    <th>Coluna B</th>
    <th>Coluna C</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A 1</td>
    <td>B 1</td>
    <td>C 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>A 2</td>
    <td>B 2</td>
    <td>C 2</td>
  </tr>
</table>

Problema:

O problema que tens é que cada vez que há um clique na tabela a função corre de novo

$('.myTable tbody tr td').click(function () {

e junta mais auscultadores de evento, multiplos. Na verdade nem precisas desta linha, pois o event.target já te dá o que queres.


Solução:

Passando o this a essa função ficas com um ponteiro do próprio elemento table, e passando event podes ler o evento e retirar o .target que é o elemento dentro da tabela que de facto recebeu o clique.

Sugiro mudares para isto:

function minhaFuncao(table, evento) {
    var td = evento.target;
    if (td.tagName.toLowerCase() != 'td') return;
    //Valores passados pelo click na tabela
    var jogoId = $(table).data('id');
    var cotacao = $(this).data('nomecotacao');
    var partida = $(table).data('jogo');
    var valorCotacao = $(this).data('valorcotacao');

    $(this).addClass('selected-cell');
    $(this).parents('tbody').find('td').not(this).removeClass('selected-cell');
    $('#removejogo_' + jogoId).removeClass('hidden');
    $('#parcialApostas').removeClass('hidden');
    $('#infopartida_' + jogoId).removeClass('w3-dark-grey');
    $('#infopartida_' + jogoId).addClass('w3-green');

    //Teste
    alert(cotacao + ': ' + valorCotacao);

    //Inclui o jogo clicado na tabela.
    /*$('#modalBody').append(
        '<tr id="tr_133" data-jogo="'+ partida +'" data-key="'+ cotacao +'" > \
            <td> \
                <p>'+ partida +'<span class="pull-right">R$'+ valorCotacao +'</span></p> \
            </td> \
        </tr>'
    );*/
}

ou colocar $('.myTable tbody tr td').click(function () { fora da função, algures depois do DOM ter carregado.

1
  • Exatamente o que eu precisava. Obrigado. 8/01/2017 às 17:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .