javascript - 突出显示动态创建的行

Question

我有一个表格，每次按下“添加”按钮时都会添加一行。我有一个“编辑”按钮，它位于新创建行的第一个单元格中。

我想突出显示正在编辑的行。我知道我可以得到当前<tr>元素

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

但是当我使用时，

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

它不会改变颜色。我犯了什么错误，我应该如何突出显示该特定行？

Answer 1

这真的是关于<tr>. CSS 不喜欢为<tr>'s 设置样式，因为它们实际上只存在于语义上。为了给一个边框添加边框，您需要制作它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')