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

【问题标题】：Update specific div inputs with chosen table inputs使用选定的表输入更新特定的 div 输入
【发布时间】：2014-09-04 22:22:26
【问题描述】：

大家好，我需要一些 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/

【问题讨论】：

选择会预先填充行的内容，还是仅将选定的选项（来自表格）附加到它？
假设将选定的选项附加到它。

标签： javascript jquery traversal selected jquery-traversing

【解决方案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/

【讨论】：