특정 테이블 입력을 특정 테이블 입력으로 업데이트하십시오.

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/