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

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/