How to get value and id within TD?

Question

I have three action links within the TD of a Table. How do I get (in Jquery) the value and id when clicking on one of the links?

Follow the code below:

var dados = [
        ['Banana', '10,00'],
        ['Maça', '2,00'],
        ['Pera', '6,00'],
        ['Goiaba', '3,25'],
        ['Tamarindo', '1,50'],
        ['Cenoura', '0,75'],
        ['Alface', '0,99'],
        ['Tomate', '3,21'],
        ['Abacaxi', 'N/D'],
        ['Kiwi', '99,50'],
        ['Cebola', '1,15'],
        ['Alho', '1,02'],
        ['Abóbora', '4,75'],
        ['Pêssego', '2,33'],
        ['laranja', '2,99']
    ];

var tamanhoPagina = 3;
var pagina = 0;

function paginar() {
    $('table > tbody > tr').remove();
    var tbody = $('table > tbody');
    for (var i = pagina * tamanhoPagina; i < dados.length && i < (pagina + 1) *  tamanhoPagina; i++) {
        tbody.append(
            $('<tr>')
                .append($('<td>').append(dados[i][0]))
                .append($('<td>').append(dados[i][1]))
                .append($('<td>').append('<a id="G" value="' + i + '" href="javascript:void(0);">Gravar</a>&nbsp;&nbsp;<a id="D" value="' + i + '" href="javascript:void(0);">Del</a>&nbsp;&nbsp;<a id="I" value="' + i + '"    href="javascript:void(0);">Inserir</a>&nbsp;'))                
        )
    }
    $('#numeracao').text('Página ' + (pagina + 1) + ' de ' + Math.ceil(dados.length / tamanhoPagina));
}

function ajustarBotoes() {
    $('#proximo').prop('disabled', dados.length <= tamanhoPagina || pagina >= Math.ceil(dados.length / tamanhoPagina) - 1);
    $('#anterior').prop('disabled', dados.length <= tamanhoPagina || pagina == 0);
}

function obtemPosicaoCelula() 
{   
       $("#myTable tbody").on('click', 'td', function() {

            var column_num = parseInt( $(this).index() ) + 1;
            var row_num = parseInt( $(this).parent().index() )+1;    

            $("#result").html( "Row_num =" + row_num + "  ,  Rolumn_num ="+ column_num );   
        });
}

$(function(){
    $('#proximo').click(function() {
        if (pagina < dados.length / tamanhoPagina - 1) {
            pagina++;
            paginar();
            ajustarBotoes();
        }
    });
    $('#anterior').click(function() {
        if (pagina > 0) {
            pagina--;
            paginar();
            ajustarBotoes();
        }
    });

    paginar();
    ajustarBotoes();
    obtemPosicaoCelula();

});

table { 
    border-spacing: 0px;
    border-collapse: separate;
    width: 100%;
    border-bottom: 1px solid #aaa;
    text-align: center;
}

thead td {    
    margin: 0;
    padding: 0;
    padding: 2px;
}

thead th {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #aaa;
}


div {
    padding-top: 10px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
    <thead>
        <tr>
            <th>Descrição</th>
            <th>Valor</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2" align="center">Nenhum dado ainda...</td>
        </tr>
    </tbody>
</table>
<div>
<button id="anterior" disabled>&lsaquo; Anterior</button>
    <span id="numeracao"></span>
<button id="proximo" disabled>Próximo &rsaquo;</button>
</div>
<div id="result"> </div>

Answer 1

Take a look at this example and see if this is it: http://jsfiddle.net/yb4pwapp/