如何將帶有動畫的CSS類添加到表格單元格的邊框中？

我試圖在按下按鈕時爲我的表添加閃爍效果。我的代碼通過使整個表閃爍來實現這一點，但是它使單元格中的數據不存在難以讀取的現有css。因此，我試圖弄清楚是否可以讓每個單元格的邊界都具有閃爍效果而不是整個單元格，以便數據仍然可以在狀態行中輕鬆讀取。這是可能的，而不必爲每個單元格添加一個CSS？如何將帶有動畫的CSS類添加到表格單元格的邊框中？

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

 
$("#stopAlarm").click(function() { 
 
    $("#tableContainer").removeClass("blink"); 
 
    $("#tableContainer").removeClass("blink"); 
 
});

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

 
.monitor { 
 
    text-align: center; 
 
} 
 

 
.row { 
 
    text-align: right; 
 
    background-color: powderblue; 
 
} 
 

 
div { 
 
    align-content: center; 
 
} 
 

 
th, 
 
td { 
 
    min-width: 80px; 
 
    width: auto; 
 
    text-align: center; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

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

 
.blink { 
 
    animation: blink 200ms infinite alternate; 
 
} 
 

 

 
/*blink effect color switcher*/ 
 

 
@keyframes blink { 
 
    from { 
 
    background-color: white; 
 
    } 
 
    to { 
 
    background-color: red; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <table id="tableContainer"> 
 
    <tr> 
 
     <th class="heading">dsgegaw</th> 
 
     <th class="heading">fvsegwaf</th> 
 
     <th class="heading">peaagwwa</th> 
 
     <th class="heading">p76uihx</th> 
 
     <th class="heading">gdjhrdu3</th> 
 
     <th class="heading">sg45y7ids</th> 
 
     <th class="heading">30jqnfj</th> 
 
     <th class="heading">][2proq2=0-i</th> 
 
     <th class="heading">-20=riojwkfl</th> 
 
     <th class="heading">t-09tujkjgf</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="column"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
     <td class="monitor"></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">System Time</td> 
 
     <td> 
 
     <div id="p1">hrgfawf</div> 
 
     </td> 
 
     <td> 
 
     <div id="p11">waffejtj</div> 
 
     </td> 
 
     <td> 
 
     <div id="c1">awfwhr</div> 
 
     </td> 
 
     <td> 
 
     <div id="ca1">afcascwef</div> 
 
     </td> 
 
     <td> 
 
     <div id="m1">grthrh</div> 
 
     </td> 
 
     <td> 
 
     <div id="mp1"></div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">Status</td> 
 
     <td> 
 
     <div id="p2">awegrthrth</div> 
 
     </td> 
 
     <td> 
 
     <div id="p21">DFAWFERGE</div> 
 
     </td> 
 
     <td> 
 
     <div id="c2">5687w43t</div> 
 
     </td> 
 
     <td> 
 
     <div id="ca2">fq3t34ytg5</div> 
 
     </td> 
 
     <td> 
 
     <div id="m2">oik768yq3</div> 
 
     </td> 
 
     <td> 
 
     <div id="mp2">90['97t</div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="row">Logged Time</td> 
 
     <td> 
 
     <div id="p3">4t3twfe6u</div> 
 
     </td> 
 
     <td> 
 
     <div id="p31">76i4y3t3</div> 
 
     </td> 
 
     <td> 
 
     <div id="c3">vetg34wt43</div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 

 
    <button id="alarm" type="button">Start Alarm</button> 
 
    <button id="stopAlarm" type="button">Stop Alarm</button> 
 
</body>

來源

2017-10-07 nanj

要做到這一點，首先需要把邊界上th和td元素。然後，你可以修改.blink選擇修改邊框的顏色，而不是背景，就像這樣：

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

 
$("#stopAlarm").click(function() { 
 
    $("#tableContainer").removeClass("blink"); 
 
});

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

 
.monitor { 
 
    text-align: center; 
 
} 
 

 
.row { 
 
    text-align: right; 
 
    background-color: powderblue; 
 
} 
 

 
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 #FFF; 
 
} 
 

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

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

 

 
/*blink effect color switcher*/ 
 

 
@keyframes blink { 
 
    from { 
 
    border-color: white; 
 
    } 
 
    to { 
 
    border-color: red; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="tableContainer"> 
 
    <tr> 
 
    <th class="heading">dsgegaw</th> 
 
    <th class="heading">fvsegwaf</th> 
 
    <th class="heading">peaagwwa</th> 
 
    <th class="heading">p76uihx</th> 
 
    <th class="heading">gdjhrdu3</th> 
 
    <th class="heading">sg45y7ids</th> 
 
    <th class="heading">30jqnfj</th> 
 
    <th class="heading">][2proq2=0-i</th> 
 
    <th class="heading">-20=riojwkfl</th> 
 
    <th class="heading">t-09tujkjgf</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="column"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    <td class="monitor"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="row">System Time</td> 
 
    <td> 
 
     <div id="p1">hrgfawf</div> 
 
    </td> 
 
    <td> 
 
     <div id="p11">waffejtj</div> 
 
    </td> 
 
    <td> 
 
     <div id="c1">awfwhr</div> 
 
    </td> 
 
    <td> 
 
     <div id="ca1">afcascwef</div> 
 
    </td> 
 
    <td> 
 
     <div id="m1">grthrh</div> 
 
    </td> 
 
    <td> 
 
     <div id="mp1"></div> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="row">Status</td> 
 
    <td> 
 
     <div id="p2">awegrthrth</div> 
 
    </td> 
 
    <td> 
 
     <div id="p21">DFAWFERGE</div> 
 
    </td> 
 
    <td> 
 
     <div id="c2">5687w43t</div> 
 
    </td> 
 
    <td> 
 
     <div id="ca2">fq3t34ytg5</div> 
 
    </td> 
 
    <td> 
 
     <div id="m2">oik768yq3</div> 
 
    </td> 
 
    <td> 
 
     <div id="mp2">90['97t</div> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="row">Logged Time</td> 
 
    <td> 
 
     <div id="p3">4t3twfe6u</div> 
 
    </td> 
 
    <td> 
 
     <div id="p31">76i4y3t3</div> 
 
    </td> 
 
    <td> 
 
     <div id="c3">vetg34wt43</div> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 

 
<button id="alarm" type="button">Start Alarm</button> 
 
<button id="stopAlarm" type="button">Stop Alarm</button>

來源

2017-10-07 08:12:58

如何將帶有動畫的CSS類添加到表格單元格的邊框中？

回答

相關問題