Exemplo de Tabela com Input Radio

Oct 13, 2025 by miodeya.com 9 views

Introdução

Ao trabalhar com tabelas em JavaScript, é comum precisar ler os valores de cada linha de um input radio sem interferir na ordem das linhas. Isso pode ser um desafio, especialmente quando a tabela é dinâmica e as linhas são adicionadas ou removidas dinamicamente. Neste artigo, vamos explorar como resolver esse problema e ler os valores de cada linha de um input radio sem afetar a ordem das linhas.

Exemplo de Tabela com Input Radio

Aqui está um exemplo de tabela com uma coluna de input radio:

<table id="tabela-exemplo">
  <tr>
    <td>Item 1</td>
    <td><input type="radio" name="opcao" value="opcao1"> Opção 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td><input type="radio" name="opcao" value="opcao2"> Opção 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td><input type="radio" name="opcao" value="opcao3"> Opção 3</td>
  </tr>
</table>

Problema

O problema é que, quando selecionamos um input radio, o valor é armazenado no atributo value do input, mas não é possível acessar esse valor diretamente sem interferir na ordem das linhas. Isso porque o atributo value é um atributo do input, e não da linha.

Solução

Para resolver esse problema, podemos usar a propriedade querySelectorAll do objeto document para selecionar todos os inputs radio da tabela e, em seguida, usar um loop para iterar sobre eles e ler o valor de cada um. Aqui está o código:

const tabela = document.getElementById('tabela-exemplo');
const radios = tabela.querySelectorAll('input[type="radio"]');
radios.forEach((radio) => {
console.log(radio.value);
});

Explicação

Nesse código, primeiro selecionamos a tabela com o ID tabela-exemplo usando o método getElementById. Em seguida, usamos a propriedade querySelectorAll para selecionar todos os inputs radio da tabela. A propriedade querySelectorAll retorna um NodeList, que é um tipo de objeto que representa uma lista de elementos.

Em seguida, usamos um loop forEach para iterar sobre os inputs radio e ler o valor de cada um. O método forEach é um método do NodeList que permite executar uma função para cada elemento da lista.

Exemplo de Uso

Aqui está um exemplo de como usar esse código:

const tabela = document.getElementById('tabela-exemplo');
const radios = tabela.querySelectorAll('input[type="radio"]');
radios.forEach((radio) => {
console.log(radio.value);
});
// Selecione um input radio
const radioSelecionado = document.querySelector('input[type="radio"]:checked');
// Ler o valor do input radio selecionado
console.log(radioSelecionado.value);

Conclusão

Em resumo, para ler os valores de cada linha de um input radio sem interferir na ordem das linhas, podemos usar a propriedade querySelectorAll do objeto document para selecionar todos os inputs radio da tabela e, em seguida, usar um loop para iterar sobre eles e ler o valor de cada um. Esse código é fácil de entender e implementar, e pode ser usado em qualquer situação em que seja necessário ler os valores de um input radio sem afetar a ordem das linhas.

Dicas e Sugestões

Certifique-se de que a tabela tenha um ID único para que possamos selecionar a tabela correta.
Certifique-se de que os inputs radio tenham um nome único para que possamos selecionar os inputs radio corretos.
Se a tabela for dinâmica e as linhas forem adicionadas ou removidas dinamicamente, certifique-se de que o código seja atualizado para refletir as mudanças na tabela.