Atribuir valor a uma tabela html

[Ericsson Berg 2]

Galera como faço para atribuir valores a uma tabela html?

 

Quando clicar no índice da tabela = RANK, numerar todas as linhas.

 

Fiz isto mas não tá funcionando.

$(document).ready(function(){
var i = 0;

$('#tb_radev tr').each(function(i){
    alert(++i);
// Adiciona uma com o número corrente
//document.getElementById('rank').value = (++1);
document.querySelector("#rank").value = (++1);
});
});

Neste exemplo é para o documento após ser gerado criar a numeração de ranking, mas preciso tbm quando o usuário clicar para ordenar outros critérios.

 

Bom, seria para deixar a primeira coluna sempre "rankeada", como se fosse fixa.

[Ericsson Berg 2]

Consegui que carregasse o rank assim, mas após a impressão da tabela pós o PHP.

 

Basicamente este primeiro insere a ordem mas muda o nome do ID para os números do rank:

$(document).ready(function(){
var i = 0;

$('#tb_radev tr').each(function(i){

// Adiciona uma com o número corrente
$("#rank").append((++i));
document.getElementById('rank').id = (i);
 
});
});

E assim não tá passado de uma parte do segundo código.

 

Este segundo é para fazer com que todo o id que foi numerado na troca do rank por i = número, volte a ser nomeado como rank, o que o alert no final mostra.

$(function(){
$(document).on('click', '.menu_rank', function(e){
e.preventDefault;

var i = 0;  
                $('#tb_radev tr').each(function(i){
                   ++i;

                    document.getElementById(i).id = ('rank');
                     $nome_id =  document.getElementById('rank').id;
                     alert($nome_id + ' - ' + i);

                });
                //Não passa após este fechamento
                alert('aqui3');
  
var i = 0;  
            $('#tb_radev tr').each(function(s){    
               ++i;
                     document.getElementById('rank').id = (i);
                  
                     $nome_id =  document.getElementById(i).id;
                     alert($nome_id + ' - ' + i);
                });
        });
});

Mas depois de uma certa parte ele para e não funciona mais. Parte onde para "alert ('aqui3');"

 

Tô parado nisso...

[Ericsson Berg 2]

Consegui quase toda a parte do que eu preciso, segue código.

$(document).ready(function(){

var x = document.querySelectorAll("#rank");
    
    for (i = 0; i < x.length; i++) {
        x[i].textContent = i+1;
    };
    
});  

Este acima para disparar após o carregamento da tabela, assim ordenando.

 

E:

$(document).on('click', '.menu_rank', function(e){
e.preventDefault;



var x = document.querySelectorAll("#rank");
    
    for (i = 0; i < x.length; i++) {
        x[i].textContent = i+1;
     //   alert(i);
    };
    
});

Este outro acima para quando clicar na ação de organizar a tabela por um outro índice, porém estou trabalhando com a tablesorter e este está sendo sempre executada por último, como faço para a função rank ser executada por último?

 

segue código que chamar o tablesorter:

$(document).ready(function(){ 
     $("#tb_radev").tablesorter({

     // sort on the first column and second column in ascending order
         sortList: [[2,1],[7,1]],

         sortMultiSortKey: 'altKey',
         stripingRowClass: ['even','odd'], 
         stripeRowsOnStartUp: true 
     }); 

}); 

[Ericsson Berg 2]

Segue a dica aí:

 

var tipo = document.getElementById('' + 'tipo' + n + '').innerText;

 

document.getElementById('' + 'tipo' + n + '').innerText = tipo;

 

Primeiro pega o valor de uma tabela html e o segundo altera.