Question

大家好，我需要一些jQuery遍历帮助（我永远无法完全正确）。在下面的示例中，当用户单击表格行（突出显示）时，这应该填充div＃editField（联系人姓名，职责和电话）的匹配输入/选择。我在这里要求类似的东西，但我们仍然在同一张桌子（http://jsfiddle.net/7vLdxddr/7/）内工作，所以这有点不同。

的jQuery

$('.table').on('click', 'tr', function (e) {

    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else {
        $('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }

    for (var i = 0; i < $(this).find("td").length; i++) {
        // fill input values
        $(this).closest("#editField").find("div").eq(i).find("input:text")
        .val($(this).find("td").eq(i).text());

        // fill selects                                                           //$(this).closest("table").find("th").eq(i).find("select")
        //.val($(this).find("td").eq(i).text());
    }
});

http://jsfiddle.net/DTcHh/1015/

Answer 1

请注意我将选项附加到选项，因此如果您选择多行，则可能必须删除预先选择的选项。但是，如果您有预先填充的选择，则只需匹配选项的值并选择它。

$('.table').on('click', 'tr', function (e) {

    var $this = $(this);

    if ($this.hasClass('selected')) {
        $this.removeClass('selected');
    } else {
        $('tr.selected').removeClass('selected');
        $this.addClass('selected');

        var user = $this.find('td').eq(0).text(),
            responsibility = $this.find('td').eq(1).text(),
            phone = $this.find('td').eq(2).text();

        // fill input values
        $('#adduser').val(user);
        $('#responsibility').append($("<option></option>")
            .attr("value", responsibility).text(responsibility));
        $('#phone').append($("<option></option>")
            .attr("value", phone).text(phone));

    }

});

http://jsfiddle.net/DTcHh/1017/

使用选定的表输入更新特定的div输入

1 个答案: