Question

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

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

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

但是当我使用时，

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

它不会改变颜色。我犯了什么错误，我应该如何突出那一行呢？

Answer 1

假设this引用tr中的元素，那么最好在这里使用.closest()

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

Answer 2

这真的是关于<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颜色使边框不透明的。还有其他方法可以做到这一点，但如果你将边框关闭，会导致表格“抖动”。

突出显示动态创建的行

2 个答案: