如何將css類應用於某個表格列和行？

我有一個函數將閃爍的動畫CSS應用於每個表格單元格的邊框。我試圖將閃爍效果僅應用於第二列，並且如果可能的話第二行應用閃爍效果，以使第二列的第二行出現錯誤。這裏是一個的jsfiddle鏈接：https://jsfiddle.net/eah5f8wp/如何將css類應用於某個表格列和行？

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

來源

2017-10-16 nanj

在你的樣式表，更改：

.blink th, .blink td {

到：

.blink {

或更改爲：

th.blink td.blink {

您當前的CSS選擇適用的動畫TH和TD元素那是.blink元素的後裔，這就是爲什麼在你的小提琴演示中，所有單元格都開始閃爍當您將.blink添加到表本身時。但在下面一行JS的有針對性的單個細胞，可以直接添加.blink類將th和td元素，沒有你的樣式表的匹配選擇：

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

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

來源

2017-10-16 03:00:09 nnnnnn

由於在之前的回答中，我將.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正常工作。嗯。

來源

2017-10-16 03:17:41 user28257

如何將css類應用於某個表格列和行？

回答

相關問題