Javascript 如何将css类应用于特定的表列和行？_Javascript_Jquery_Html_Css

Javascript 如何将css类应用于特定的表列和行？

javascript jquery html css

Javascript 如何将css类应用于特定的表列和行？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个函数，它将闪烁的动画css应用于每个表单元格的边框。我试图将闪烁效果仅应用于第2列，如果可能的话，应用于第2行，因此它会使第2列的第2行出现错误。下面是一个JSFIDLE链接：我的html： <body> <table id = "tableContainer"> <tr> <th class="heading">aaa</th> <th class="heading">bbb&

我有一个函数，它将闪烁的动画css应用于每个表单元格的边框。我试图将闪烁效果仅应用于第2列，如果可能的话，应用于第2行，因此它会使第2列的第2行出现错误。下面是一个JSFIDLE链接：

我的html：

<body>
  <table id = "tableContainer">
    <tr>
      <th class="heading">aaa</th>
      <th class="heading">bbb</th>
      <th class="heading">ccc</th>
    </tr>

    <tr>
      <td class="column">aaa</td>
      <td class="monitor">bbb</td>
      <td class="monitor">ccc</td>
    <button id="alarm" type="button">Start Alarm</button>
  </table>

但它不起作用

$(document).ready(function(){
    $("#alarm").click(function(){
                $("#tableContainer").addClass("blink");
    });
});

css:

在样式表中，更改：

.blink th, .blink td {

致：

或将其更改为：

th.blink td.blink {

您当前的CSS选择器将动画应用于

.blink

元素的后代th和td元素，这就是为什么在您的小提琴演示中，当您将

.blink

添加到表格本身时，所有单元格都开始闪烁的原因。但是在以下针对单个单元格的JS行中，您将

.blink

类直接添加到th和td元素，这与样式表的选择器不匹配：

$("#tableContainer th:nth-child(" + 1 + "), #tableContainer td:nth-child(" + 1 + ")")
    .addClass("blink");

更新的演示：

与前面的答案一样，我将

.blink th、.blink td

更改为

.blink

我添加了包含要闪烁的所需行和列的变量，并更改了选择器，如下所示：

$('#tableContainer tr:nth-child(' + highlightedRow + '), #tableContainer tr td:nth-child(' + highlightedColumn + '), #tableContainer tr th:nth-child(' + highlightedColumn + ')')

以下是更新的JSFIDLE：

哦，是的，我把闪烁变成了手机的背景色，因为边框只是部分闪烁，这让我的眼睛抽搐。更新：并且它不能与

边框颜色一起正常工作。嗯。这是可行的，应该被接受为答案（upvote）
th.blink td.blink {

$("#tableContainer th:nth-child(" + 1 + "), #tableContainer td:nth-child(" + 1 + ")")
    .addClass("blink");

$('#tableContainer tr:nth-child(' + highlightedRow + '), #tableContainer tr td:nth-child(' + highlightedColumn + '), #tableContainer tr th:nth-child(' + highlightedColumn + ')')