单击而不是按钮更改特定行的 CSS答案

【问题标题】：Change CSS of specific row on click instead of the button单击而不是按钮更改特定行的 CSS
【发布时间】：2016-07-15 02:20:05
【问题描述】：

所以我有这个按钮，你点击它，它会将background color 从蓝色变为红色。如果我想让该按钮更改row background color，我该怎么做？这也是一个循环，所以所有的类都是一样的，我使用下面的代码，所以它只会改变我点击的东西，而不是那个类的所有东西。

脚本

<script type="text/javascript">
$('.a-row').on('click', '.H', function () {
    $( this ).css( "background-color", "red" );
});
</script>

html/php

<tr class="a-row">
 <td><p class="pname"><?=$row["Name"]?></p><p class="clickbutt H">H</p></td>
 <td>stuff</td>
 <td>stuff2</td>
 <td>stuff3</td>
</tr>

【问题讨论】：

标签： jquery css dom html-table

【解决方案1】：

你可以使用.parents()方法

<script type="text/javascript">
$('.a-row').on('click', '.H', function () {
    $( this ).parents("tr").css( "background-color", "red" );
});
</script>

Example

【讨论】：

【解决方案2】：

你可以使用.closest('tr'):

$('.a-row').on('click', '.H', function () {
    $(this).closest('tr').css( "background-color", "red" );
});

jquery .closest()

【讨论】：

【解决方案3】：

你可以像这样尝试jquery的.closest()方法。

<script type="text/javascript">
 $('.H').on('click', function () {
  $( this ).closest.('tr').css( "background-color", "red" );
 });
</script>

您可以在此处查看文档。 https://api.jquery.com/closest/

希望这对您有所帮助。

【讨论】：