jQuery múltiples botones de radio

Question

Nuevo en javascript / jquery y tener dificultades con el uso de " this " o " $ (esto) " para obtener el objeto actual.

Tengo una tabla con un conjunto de botones de opción en cada fila, cada uno llamado 's_'. Ninguno de los botones de opción está marcado de forma predeterminada:

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

Estoy tratando de escribir una función jQuery para agregar una nueva fila a la tabla cuando el usuario selecciona un botón de opción, pero solo si están actualmente en la última fila de la tabla. Lo que me gustaría hacer es obtener el atributo de nombre del botón de radio en el que se hizo clic, analizarlo para obtener el índice de la fila (es decir, la parte después de la '_') y compararlo con el número de filas en la tabla. Si son iguales, agregue una nueva fila, de lo contrario, no haga nada.

Mi pregunta es doble, dependiendo de cómo debo atacar esto:

1) ¿Cómo devuelvo el atributo de nombre de un botón de opción, O 2) ¿Cómo devuelvo el índice de fila de la fila en la que estoy actualmente?

Answer 1

Esto te dará el índice, usando el HTML que has proporcionado:

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

Otra cosa que puede ayudarte: recuperar el número de filas en tu tabla:

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

Espero que esto te ayude en tu camino.

Answer 2

Para sus preguntas específicas 1 & amp; 2, si le dio a su mesa un ID de " mytable " ;, este ejemplo debería darle lo que está buscando:

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

Answer 3

Aquí hay un código no probado, fuera de mi cabeza:

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

Lo que hace es adjuntar un evento onclick a cada uno de los botones de radio en el div. El botón onclick verificará si el último botón de opción en ese grupo está marcado, y si es así agregará otro elemento.

Como he dicho, todavía no se ha probado. No estoy seguro del selector (# div_s_0 ...: last ), así que primero ejecútelo en Firebug.