Why do onclick events on table lines not work after loading?

Question

People, when I position the mouse arrow should appear a hand or a vertical dash, and still without action when I click.

foreach($campeonatos as $campeonato){ //ta no select

        echo "<tr style='background-color: #008000;'> 
        <td>
        <span name='camp'>".$campeonato['CAMP_NOME']."</span>
        </td>
        </tr>";

        foreach($dados as $dado){
            $dia = substr($dado['dt_hr_ini'], 8, 2); 
            $data = formDt($dado['dt_hr_ini']);
            if($dado["esporte"] == "Futebol" && $dado['Odds'] != null && $dia >= date('d') && 
            $campeonato['CAMP_NOME'] == $dado['camp_nome']):
            $cod = $dado['camp_jog_id'];?>

            <tr id='id_linha' onclick='escolheJogos(this), calcPremio()' >
            <td>
            <span name='id_timea'><?php echo $dado['casa_time']?></span>
            </td>
            <td>
            <span name='id_timeb'><?php echo $dado['visit_time'] ?></span>
            </td>
            <td>
            <span name='id_data'><?php echo $data ?></span>
            </td>
            <td>
            <span name='campnome'><?php echo $dado['camp_nome'] ?></span> 
            </td>
            <td>
            <span alt='casa' onclick="escolhaCotacao('casa')"><?php echo $dado['Odds'][0]['taxa'] ?> </span>
            </td>
            <td>
            <span alt='empate' onclick="escolhaCotacao('empate')"><?php echo $dado['Odds'][1]['taxa'] ?></span>
            </td>
            <td>
            <span alt='fora' onclick="escolhaCotacao('fora')"><?php echo $dado['Odds'][2]['taxa'] ?> </span>
            </td>
            <td>
            <input id='id_sub' type='submit' onclick='insere(this);' value=<?php echo $cod ?> >   
            </td>
            </tr>

            <?php endif;
       }
       // return;
    }
?> 
</tbody>
</table>
</form>

Javascript

<script>



//cara se tiver algo errado meu editor nao ta acusando

function escolhaCotacao(res) { resulta = res;//global console.log(resulta); }

function escolheJogos(refLinha) {
    if (refLinha.getElementsByTagName("td").length == 2 && !repetido) {
        var resultado = refLinha.getElementsByTagName("td")[0].getElementsByTagName("span")[0].innerHTML;
        cot = refLinha.getElementsByTagName("td")[1].getElementsByTagName("span")[0].innerHTML;

        if (resultado != "") {

            tables = document.getElementById("id_tableBilhete");
            rows = tables.insertRow(-1);
            rows.innerHTML = "<td class='timeA'>" + timeA + "</td><td class='timeB'>" + timeB + "</td><td class"+
            "='data'>" + data + "</td><td class='cotacao'>" + cot + "</td><td class='result'>" + resultado + "</td><td><a href='#' onclick='myDeleteFuncao(this), calcPremio()' class='excluir' style='color:yellow'>EXCLUIR</a></td>";
            cont++;
            document.getElementById("id_n_jogos").value = cont;
        }
        repetido = false;
        //resultado = 0;
    } else if(!repetido) {
        timeA = refLinha.getElementsByTagName("td")[0].getElementsByTagName("span")[0].innerHTML;
        timeB = refLinha.getElementsByTagName("td")[1].getElementsByTagName("span")[0].innerHTML;
        data = refLinha.getElementsByTagName("td")[2].getElementsByTagName("span")[0].innerHTML;

        //$("#id_ta").val(timeA);

        if (resulta == 'casa')
            cot = refLinha.getElementsByTagName("td")[4].getElementsByTagName("span")[0].innerHTML;
        if (resulta == 'empate')
            cot = refLinha.getElementsByTagName("td")[5].getElementsByTagName("span")[0].innerHTML;
        if (resulta == 'fora')
            cot = refLinha.getElementsByTagName("td")[6].getElementsByTagName("span")[0].innerHTML;
        /*if (resultado == 'ambas')
            cot = refLinha.getElementsByTagName("td")[6].getElementsByTagName("span")[0].innerHTML;
        if (resultado == 'soum')
            cot = refLinha.getElementsByTagName("td")[9].getElementsByTagName("span")[0].innerHTML;
        */

        //hora = refLinha.getElementsByTagName("td")[3].getElementsByTagName("span")[0].innerHTML;

        if (resulta != '') {
            table = document.getElementById("id_tableBilhete");
            row = table.insertRow(-1);
            row.innerHTML = "<td class='timeA'>" + timeA + "</td><td class='timeB'>" + timeB + "</td><td class='data'>" + data + "</td><td class='cotacao'>" + cot + "</td><td class='result'>" + resulta + "</td><td><a href='#' onclick='myDeleteFuncao(this), calcPremio()' class='excluir' style='color:yellow'>EXCLUIR</a></td>";
            cont++;
            document.getElementById("id_n_jogos").value = cont;

        }
        resulta = '';//o usuario tem que clicar em uma celula cotacao pra mudar valor
    }
    $('#id_quan').val(document.getElementById("id_n_jogos").value);
}
</script> 

Answer 1

As much as it has a function onclick, the click cursor only appears on a button or a <a>. To appear in other elements, you should put in CSS:

.classe-ou-id-do-elemento {
   cursor: pointer;
}

If the click is not working it is because your JS is incorrect. Post it here.

Answer 2

In my view, this is the best approach, especially when manipulating HTML via JS (jQuery):

HTML:

<table>
    <tr class="id_linha" data-linha="1">
        <td></td>
    </tr>
</table>

CSS:

.id_linha{
   cursor: pointer;
}

JS:

$(document).on("click","#id_linha",function() {
   console.log($(this).attr("data-linha"));
});