jQuery pulsanti di opzione multipli

Question

Novità in javascript / jquery e difficoltà a utilizzare " questo " o " $ (questo) " per ottenere l'oggetto corrente.

Ho una tabella con una serie di pulsanti di opzione su ogni riga, ognuno chiamato "s_". Nessuno dei pulsanti di opzione è selezionato per impostazione predefinita:

<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>

Sto provando a scrivere una funzione jQuery per aggiungere una nuova riga alla tabella ogni volta che l'utente seleziona un pulsante di opzione, ma solo se si trovano attualmente nell'ultima riga della tabella. Quello che mi piacerebbe fare è ottenere l'attributo name del pulsante di opzione cliccato, analizzarlo per ottenere l'indice di riga (ovvero la parte dopo '_') e confrontarlo con il numero di righe nella tabella. Se sono uguali, aggiungi una nuova riga, altrimenti non fare nulla.

La mia domanda è duplice, a seconda di come dovrei attaccarlo:

1) Come posso restituire l'attributo name di un pulsante di opzione, OR 2) Come posso restituire l'indice di riga della riga in cui mi trovo attualmente?

Answer 1

Questo ti porterà all'indice, usando l'HTML che hai fornito:

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

Un'altra cosa che può aiutarti: recuperare il numero di righe nella tua tabella:

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

Spero che questo ti aiuti sulla tua strada.

Answer 2

Per le tue domande specifiche 1 & amp; 2, se hai assegnato al tuo tavolo un ID di " mytable " ;, questo esempio dovrebbe darti quello che stai cercando:

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

Answer 3

Ecco del codice non testato, in cima alla mia testa:

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

Ciò che fa è associare un evento onclick a ciascuno dei pulsanti di opzione nel div. L'onclick verificherà se l'ultimo pulsante di opzione in quel gruppo è selezionato e in tal caso aggiungi un altro elemento.

Come ho detto, non è stato ancora testato. Non sono sicuro del selettore (# div_s_0 ...: last ), quindi provalo prima in Firebug.