代码之家 › 专栏 › 技术社区 › triplethreat77

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

jquery-traversing selected traversal jquery javascript

triplethreat77 · 技术社区 · 10 年前

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

1 回复 | 直到 10 年前

o--oOoOoO--o 10 年前

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

$('.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/