Get value from HTML Table Cell
<p>I want a HTML Table in such a way that I can select only one cell and retrieve it's value so I can use in other operations on my app. The problem is that I have no idea on how to structure the table in a way that only one cell can be selected, the selected cell change it's color and so on. Here's an example so you guys can picture what I have in mind.</p>

<p><a href="http://i.stack.imgur.com/mwN73.jpg" rel="nofollow">Table selection</a></p>

<p>And here is the hardcoded model of my app:</p>

<pre><code>&lt;body&gt;
    &lt;!-- NAVBAR INÍCIO --&gt;
    &lt;nav id="barra_navegacao"class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container-fluid"&gt;
            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                    &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;a class="navbar-brand" href="jogos.html" title="Início"&gt;
                    &lt;i class="fa fa-home"&gt;&lt;/i&gt;
                &lt;/a&gt;

                &lt;a class="navbar-brand" href="jogos.html" title="Início"&gt;
                    &lt;i class="fa fa-bluetooth"&gt;&lt;/i&gt;
                &lt;/a&gt;

                &lt;a class="navbar-brand" href="jogos.html" title="Início"&gt;
                    &lt;i class="fa fa-print"&gt;&lt;/i&gt;
                &lt;/a&gt;

                &lt;a class="navbar-brand" href="jogos.html" title="Início"&gt;
                    &lt;i class="fa fa-whatsapp"&gt;&lt;/i&gt;
                &lt;/a&gt;

            &lt;/div&gt;
            &lt;div id="navbar" class="navbar-collapse collapse"&gt;

                &lt;!--&lt;ul class="nav navbar-nav"&gt;
                    &lt;li&gt;&lt;a href=""&gt;&lt;span class="fa glyphicon-log-out"&gt;&lt;/span&gt; &lt;small&gt;SAIR&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt; 
                &lt;ul class="nav navbar-nav"&gt;
                    &lt;li&gt;&lt;a style="color: red;" href="../config/encerra_acesso.php"&gt;&lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt; &lt;small&gt;SAIR&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt; /--&gt;                   

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- NAVBAR FIM--&gt;



    &lt;!-- PAINEL APOSTAS INÍCIO --&gt;
    &lt;div id="painel_aposta" class="painel-aposta row"&gt;
        &lt;div class="col-xs-6"&gt;
            &lt;div class="input-group"&gt;
                &lt;span class="input-group-addon" id="add-on"&gt;R$&lt;/span&gt;
                &lt;input style="width: 90px;" type="text" class="form-control" placeholder="5.00" aria-describedby="add-on"&gt;
            &lt;/div&gt;
            Retorno(R$): &lt;b&gt;0.00&lt;/b&gt;&lt;br&gt;
            Qtd. Jogos: &lt;b&gt;0&lt;/b&gt;&lt;br&gt;
        &lt;/div&gt;
        &lt;div class="pull-right"&gt;
            &lt;button id="finalizar_aposta" type="button" class="btn btn-info btn-sm" onclick=""&gt;
                &lt;i class="fa fa-refresh"&gt;&lt;/i&gt;
                Atualizar
            &lt;/button&gt;

            &lt;button id="finalizar_aposta" class="btn btn-success btn-sm" 
                onclick="submitForm('form_apostas')"&gt;
            &lt;i class="fa fa-check"&gt;&lt;/i&gt;
            Finalizar
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- PAINEL APOSTAS FIM --&gt;




    &lt;!-- COTAÇÕES INÍCIO --&gt;
    &lt;div id="painel_partidas" class="panel panel-primary panel-heading-margin"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;center&gt;
                &lt;b&gt;Brasil &amp;raquo; Série A&lt;/b&gt;
                &lt;button data-toggle="collapse" data-target="#partida" class="btn btn-default btn-xs pull-right"&gt;&lt;i class="fa fa-compress"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/center&gt;
        &lt;/div&gt;

        &lt;div id="partida" class="panel-heading-margin"&gt;


            &lt;table class="w3-table-all w3-card-4" style="width: 100%"&gt;
                &lt;tr class="w3-dark-grey"&gt;
                    &lt;td&gt;
                        &lt;small&gt;TALLERES ESCALADA x EXCURSIONISTAS&lt;/small&gt;
                        &lt;span class="pull-right"&gt;&lt;small&gt;08/10 18:00 &amp;nbsp; &lt;/small&gt; &lt;button class="btn btn-danger btn-xs pull-right"&gt;&lt;span class="fa fa-close"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;

            &lt;table class="w3-table-all w3-card-4" style="width: 100%"&gt;

                &lt;tbody&gt;
                    &lt;tr&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;center&gt;
                                Casa&lt;br&gt;
                                &lt;strong&gt;2.00&lt;/strong&gt;
                            &lt;/center&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/tbody&gt;

            &lt;/table&gt;

            &lt;div id="resultado"&gt;&lt;/div&gt;

                &lt;!--COTAÇÕES AQUI--&gt;

        &lt;/div&gt;

    &lt;/div&gt;
    &lt;!-- COTAÇÕES FIM --&gt;


    &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/js/webservice.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/js/index.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/pace/pace.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!--&lt;script type="text/javascript"&gt;listaCampeonatos();&lt;/script&gt;--&gt;
    &lt;!--&lt;script type="text/javascript" src="assets/materialize/js/materialize.min.js"&gt;&lt;/script&gt;--&gt;

&lt;/body&gt;
</code></pre>

<p><a href="http://i.stack.imgur.com/T6pGv.png" rel="nofollow">My app</a></p>

<p>I need basically the same thing in the fist screenshot. If someone can enlighten me with some help I'd appreciate. Thanks in advance.</p>