Jquery - получение всего содержимого строки

Question

Я довольно новичок в jquery или любых веб-технологиях в этом отношении.

Вот мой HTML-код:

<form id = "featureform">
        <!-- Table inside the form -->
        <table id="mytable" class="table table-striped">
            <!-- First Row -->
            <tr id = "tableRow1">
                <td><input id="from_checkbox" class="form-input-checkbox" type="checkbox" checked
                                            data-toggle="toggle" data-on="From" data-off="From"></td>
                <td><input type="text" id="from_text" value="tester@test.com"></td>
            </tr>

            <!-- Second Row -->
            <tr id = "tableRow2">
                <td><input id="to_checkbox" class="form-input-checkbox" type="checkbox" checked
                                            data-toggle="toggle" data-on="To" data-off="To"></td>
                <td><input type="text" id="to_text" value="myself@dummy.com"></td>
            </tr>
        </table>
    </form>

Итак, у меня есть таблица внутри формы. Каждая строка таблицы имеет 2 столбца. Первый столбец будет содержать переключатель начальной загрузки. Текстовое поле будет содержать значение для этого конкретного флажка. Оба типа ввода (флажок и текстовое поле) имеют идентификаторы, связанные с ними.

Вот что я хочу сделать:

Нужна помощь здесь . Когда пользователь устанавливает флажок, я хочу знать его идентификатор и текстовое поле.

Эта таблица будет иметь несколько строк, поэтому жесткое кодирование для каждой строки на основе идентификатора не является решением. Я ищу общее решение, которое выглядит так:

//form-input-checkbox is the class name assigned for every checkbox. So we monitor any events coming from these
//   checkboxes, and do the magic
$(".form-input-checkbox").change(function(){
    // Extract the id of the checkbox
    // Extract the id of the textfield in this row
    console.log($(this).closest("tr"));
});

javascript jquery html twitter-bootstrap checkbox

2

gixxer 19 Дек 2015 в 02:17

Answer 1

Вы можете использовать метод jQuery attr(), чтобы получить значение свойства id. Чтобы получить ссылку на текстовое поле, сначала используйте метод closest(), чтобы получить ссылку на внешний tr, и используйте метод find(), чтобы получить поле ввода.

Это должно сработать.

$(".form-input-checkbox").change(function(){
    var _this=$(this);

    alert(_this.attr("id"));
    alert(_this.closest("tr").find("input[type='text']").attr("id"));
});

Здесь - рабочий пример.

2

Shyju 18 Дек 2015 в 23:20

Answer 2

Это должно помочь.

    $(document).ready(function() {
        $("input:checkbox[data-toggle='toggle']").change(function() {
            var $checkbox = $(this);

            var checkboxId = $checkbox.attr("id");
            var inputId = $checkbox.parent().next("td").find("input:text").attr("id");

            console.log(checkboxId);
            console.log(inputId);
        });
    });

0

Jason Harris 18 Дек 2015 в 23:28

Answer 3

Ваш код должен быть таким:

$(".form-input-checkbox").change(function(){
   // Extract the id of the checkbox
    console.log($(this).attr("id"));
        // Extract the id of the textfield in this row
    console.log($(this).closest("tr").find("input[type='text']").attr("id"));

});

Это рабочий плнкр

-1

aitnasser 18 Дек 2015 в 23:31

Jquery - получение всего содержимого строки

3 ответа

Похожие вопросы

Новые вопросы

javascript