Несколько переключателей jQuery

Question

Новичок в javascript/jquery, и вам сложно использовать «this» или «$(this)» для получения текущего объекта.

У меня есть таблица с набором переключателей в каждой строке, каждый из которых называется «s_».Ни один из переключателей не отмечен по умолчанию:

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

Я пытаюсь написать функцию jQuery, чтобы добавлять новую строку в таблицу всякий раз, когда пользователь выбирает переключатель, но только если он в данный момент находится в последней строке таблицы.Я хотел бы получить атрибут имени нажатого переключателя, проанализировать его, чтобы получить индекс строки (т.е.часть после '_') и сравните ее с количеством строк в таблице.Если они равны, добавьте новую строку, иначе ничего не делайте.

У меня двоякий вопрос, в зависимости от того, как мне следует атаковать это:

1) Как я могу вернуть атрибут имени радиопроизводительной кнопки или 2) Как вернуть индекс строки строки, в котором я сейчас нахожусь?

Answer 1

Это даст вам индекс, используя предоставленный вами HTML:

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

Еще одна вещь, которая может вам помочь:получение количества строк в вашей таблице:

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

Надеюсь, это поможет вам на вашем пути.

Answer 2

Для ваших конкретных вопросов 1 и 2, если вы дали своей таблице идентификатор «mytable», этот пример должен дать вам то, что вы ищете:

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

Answer 3

Вот непроверенный код, который пришел мне в голову:

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

Это прикрепляет событие onclick к каждому переключателю в элементе div.Onclick проверит, установлен ли последний переключатель в этой группе, и если да, то добавит еще один элемент.

Как я уже сказал, это еще не тестировалось.Я не уверен насчет селектора (#div_s_0 ... :last), так что сначала опробуйте его в Firebug.