以tr元素为目标的Javascript

我试图以“.income\u table”类的表中的元素为目标。我想在每次单击元素时切换/取消切换高亮显示的背景色。这不起作用：

<script>
 $(document).ready(function(){
    $(".income_table tr").click(function () {
        $(this).toggleClass("toggled_tr");
     });
 });
</script>

$（文档）.ready（函数（）{
$（“.income_table tr”）。单击（函数（）{
$（this.toggleClass（“toggled_tr”）；
});
});

---

我的代码有问题吗？

看起来不错，但是您可能需要针对TDs并在那里应用类。尝试：

<script>
 $(document).ready(function(){
    $(".income_table tr td").click(function () {
        $(this).siblings().toggleClass("toggled_td");
     });
 });
</script>

$（文档）.ready（函数（）{
$（“.income_table tr td”）。单击（函数（）{
$（this）.this（）.toggleClass（“toggled_td”）；
});
});

对我有用：

.income_表{背景色：红色}
.toggled_tr{背景色：黄色}
$（文档）.ready（函数（）{
$（“.income_table tr”）。单击（函数（）{
$（this.toggleClass（“toggled_tr”）；
});
});
第1行第1单元
第1行第2单元
第2行第1单元
第2行第2单元

我猜你的css做得不对。桌子的式样可能很讲究。

<style>
.income_table { background-color:red }
.toggled_tr { background-color:yellow }
</style>
<script>
$(document).ready(function() {
  $(".income_table tr").click(function () {
   $(this).toggleClass("toggled_tr");
  });
});
</script>

<table class="income_table">
    <tr>
        <td>Row 1 cell 1</td>
        <td>Row 1 cell 2</td>
    </tr>
    <tr>
        <td>Row 2 cell 1</td>
        <td>Row 2 cell 2</td>
    </tr>
</table>