jQuery botões múltiplos de rádio

Question

Novo para javascript / jquery e tendo um momento difícil com o uso de "isso" ou "$ (this)" para obter o objeto atual.

Eu tenho uma tabela com um conjunto de botões de rádio em cada linha, cada um com o nome 's_'. Nenhum dos botões de rádio são verificados por padrão:

<tr>
   <td align="left" style="width: 300px">
      <div id="div_s_0">
         <input type="radio" name="s_0" value="1" />Public
         <input type="radio" name="s_0" value="2" />Not Public
         <input type="radio" name="s_0" value="3" />Confidential
      </div>
   </td>
</tr>
<tr>
   <td align="left" style="width: 300px">
      <div id="div_s_1">
         <input type="radio" name="s_1" value="1" />Public
         <input type="radio" name="s_1" value="2" />Not Public
         <input type="radio" name="s_1" value="3" />Confidential
      </div>
   </td>
</tr>

Eu estou tentando escrever uma função jQuery para adicionar uma nova linha à tabela sempre que o usuário seleciona um botão de opção, mas somente se eles estão atualmente na última linha da tabela. O que eu gostaria de fazer é obter o atributo de nome do botão de opção clicada, analisá-lo para obter o índice de linha (ou seja, a parte após o '_') e compará-lo com o número de linhas na tabela. Se eles são iguais, adicionar uma nova linha, caso contrário, não fazer nada.

A minha pergunta é dupla, dependendo de como eu deveria atacar este:

1) Como faço para retornar o atributo nome de um botão de opção, OR 2) Como faço para retornar o índice de linha da linha Eu estou atualmente em?

Answer 1

Isto fará você o índice, utilizando o código HTML que você forneceu:

$(document).ready(function() {
    $("input:radio").click(function() {
        var index = parseInt(this.name.split('_')[1])
    });
});

Outra coisa que pode ajudá-lo: recuperar o número de linhas em sua tabela:

$($("table").children()[0]).children().length

Espero que isso ajude você em seu caminho.

Answer 2

Para as suas perguntas específicas 1 e 2, se você deu a sua mesa uma identificação de "mytable", este exemplo deve dar-lhe o que você está procurando:

var rowIndex = $("#mytable tr").index($(this).parents("tr"));
var inputName = $(this).attr("name");
alert("Input Name: " + inputName + "; RowIndex: " + rowIndex);

Answer 3

Aqui está algum código não testado, em cima da minha cabeça:

$("#div_s_0 input[type='radio']").onclick = function() {
    if ($("#div_s_0 input[type='radio']:last").attr('checked') == 'checked') {
    /* add a new element */
    }
}

O que faz é anexar um evento onclick para cada um dos botões de rádio no div. O onclick irá verificar se o último botão de rádio em que grupo está marcada, e se assim for adicionar outro elemento.

Como eu disse que ainda não foi testado. Não tenho certeza sobre o seletor (#div_s_0 ... :last) para dar-lhe uma corrida no Firebug em primeiro lugar.