javascript - 如何将带有动画的 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>

最佳答案

要实现这一点，您首先需要在 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>

关于javascript - 如何将带有动画的 CSS 类添加到表格单元格的边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46618023/

javascript - 如何将带有动画的 CSS 类添加到表格单元格的边框？

上一篇：javascript - 如何使用jquery在页面上动态添加用户

下一篇：html - OUTSIDE 边框仅适用于跨越多行的文本