用選定的表格輸入更新特定的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/