Question

我有一个函数，它将闪烁的动画css应用于每个表格单元格的边框。我试图仅将闪烁效果应用于第二列，如果可能的话第二行，因此它给出了第二列第二行有错误的效果。这是一个JSfiddle链接：https://jsfiddle.net/eah5f8wp/

我的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>

javascript：我尝试过使用：

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

但它不起作用

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

的CSS：

.heading 
{
  text-align:center;
  background-color: #C1C1C1;
}

.monitor 
{
  text-align:center;

}

.row 
{
  text-align:right;
  background-color:rgb(210, 251, 255);
}

div 
{
  align-content:center;
}

table {
  border-collapse: collapse;
}

th, td 
{
  min-width: 80px;
  width: auto;
  text-align:center;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid rgb(218, 218, 218);z
}

tr:nth-child(even)
{
  background-color: white;
}

/* blink effect */
.blink th, .blink td {
    animation: blink 200ms infinite alternate;
}

/*blink effect color switcher*/
@keyframes blink {
    from { border-color: white; }
    to { border-color: red; }
};

Answer 1

在样式表中，更改：

.blink th, .blink td {

为：

.blink {

或将其更改为：

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");

更新了演示：https://jsfiddle.net/eah5f8wp/2/

Answer 2

与之前的回答一样，我将.blink th, .blink td更改为.blink。

我添加了包含所需行和列的变量以进行闪烁，并按如下方式更改了选择器：

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

这是更新的jsfiddle：https://jsfiddle.net/eah5f8wp/3/

哦是的，我把眨眼变成了细胞的背景颜色，因为边框只是部分闪现，这让我的眼睛抽搐了。更新：它与border-color无法正常工作。 HMM。

如何将css类应用于某些表列和行？

2 个答案: