jquery - 无法在 jQuery 中设置父级 "<tr>"的 CSS 属性

Question

我有一个 table像这样:

<table>
    <tbody style="border: 4px solid red;">
        <tr>
            <td class="HeaderOfTable" style="width:5%; padding:5px;">#</td>
            <td class="HeaderOfTable" style="width:70%; padding:5px;">Title</td>
            <td class="HeaderOfTable" style="width:10%; padding:5px;">Number of Items</td>
            <td class="HeaderOfTable" style="width:15%; padding:5px;">Operations</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Gone With the Wind</td>
            <td>2</td>
            <td>
                <input type="button" class="btnShowSearchResults" value="Show Item Details">
            </td>
        </tr>
    </tbody>
</table>

和jQuery代码如下:

$('body').on('click', '.btnShowSearchResults', function() {
    $(this).parents('tr').css('border', '1px solid red');
});

问题很明显: parent 'tr'边界不会改变!请注意:

• 这对其他元素非常有效:

$(this).parent().css('border', '1px solid red');作品! $(this).parents('tr').parent().css('border', '1px solid red');作品! $(this).parent().prev().css('border', '1px solid red');有效!

• 执行后父tr的样式变为<tr style="display:table-row; border: 1px solid red;">但浏览器仍然没有变化!
• 最后，我认为这不适用于 'tr' s.

Answer 1

您自己找到了解决方案:您不能在 tr 标签上使用 border。这与 jQuery 或 parent() 无关。

将它应用于行的每个 td 可能是一种可行的方法。取决于您的需求。