동적으로 생성 된 행 강조하기

Question

"추가"버튼을 누를 때마다 행이 추가되는 테이블이 있습니다. 내가 새로 만든 행의 첫 번째 셀에 배치 된 "편집"버튼이 있습니다.

편집중인 행을 강조 표시하고 싶습니다. 나는,

var par = $(this).parent().parent(); 

그러나 때 내가 사용하는 것처럼 현재 <tr> 요소를 얻을 수 있습니다

par.css('border-color', 'red'); 

그것은 색상을 변경하지 않는 것을 알고있다. 어떤 실수를 저지르고 특정 행을 강조 표시해야합니까? 가정 this

Answer 1

이것은 <tr>의 스타일에 대해 정말 .closest()를 사용하는 것이 더 좋을 것이다. CSS는 실제로 의미론을 위해서만 존재하기 때문에 <tr>의 스타일을 선호하지 않습니다. 하나에 테두리를 추가하려면 display: block;으로 지정해야합니다.

여기에 jsFiddle 및 예제 코드가 있습니다. 내가 공을 사용하는 방법

HTML

<table> 
    <tbody> 
     <tr><td>Some Content</td></tr> 
     <tr><td>Some Content</td></tr> 
     <tr> 
      <td> 
       <a href="#" class="edit">Edit</a> 
      </td> 
     </tr> 
     <tr><td>Some Content</td></tr> 
     <tr><td>Some Content</td></tr> 
    </tbody> 
</table> 

자바 스크립트

$(".edit").click(function(e) { 
    $(this).closest('tr').toggleClass('editting'); 
    e.preventDefault(); 
}); 

CSS

table tr { 
    display: block; 
    border: 1px solid rgba(0, 0, 0, 0); 
} 

.editting { 
    background: #FAA; 
    border: 1px solid red; 
} 

있습니다테두리를 불투명하게하는 색상입니다. 이 작업을 수행하는 다른 방법이 있지만 경계를 벗어나면 테이블이 "지터"됩니다.

Answer 2

가 tr 내의 요소를 의미, 여기

var par = $(this).closest('tr')