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

时间：2017-10-07 08:02:39

标签： javascript jquery html 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>

1 个答案:

答案 0 :(得分：1)

要实现此目的，首先需要在th和td元素上添加边框。然后你可以修改.blink选择器来修改边框的颜色而不是背景，如下所示：

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

$("#stopAlarm").click(function() {
  $("#tableContainer").removeClass("blink");
});
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题