Выделение динамически созданной строки

Question

У меня есть таблица, где строка добавляется каждый раз, когда я нажимаю кнопку «Добавить». У меня есть кнопка «Изменить», которая помещается в первую ячейку только что созданной строки.

Я хочу выделить строку, которая редактируется. Я знаю, что я могу получить текущий элемент <tr> как

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

Но когда я использую,

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

Это не меняет цвет. Какую ошибку я делаю и как я должен выделить эту конкретную строку?

Answer 1

Это действительно о стилизации <tr>. 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> 

Javascript

$(".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; 
} 

Пожалуйста, обратите внимание, как я использовал rgba цвет, чтобы сделать границу непрозрачной. Существуют и другие способы сделать это, но если вы покинете границу, это приведет к «джиттеру» таблицы.

Answer 2

Предполагая this относится к элементу в пределах tr, то это будет лучше использовать .closest() здесь

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