CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nanj
nanj

Reputation: 105

How to overwrite a CSS class at the press of a button and remove it with another button?

I and trying to apply a blinking effect css class to the whole table when someone presses the button. However, some rows are not being affected by the blink class. 

$("#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;
}

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"></div>
      </td>
      <td>
        <div id="p11"></div>
      </td>
      <td>
        <div id="c1"></div>
      </td>
      <td>
        <div id="ca1"></div>
      </td>
      <td>
        <div id="m1"></div>
      </td>
      <td>
        <div id="mp1"></div>
      </td>
    </tr>

    <tr>
      <td class="row">Status</td>
      <td>
        <div id="p2"></div>
      </td>
      <td>
        <div id="p21"></div>
      </td>
      <td>
        <div id="c2"></div>
      </td>
      <td>
        <div id="ca2"></div>
      </td>
      <td>
        <div id="m2"></div>
      </td>
      <td>
        <div id="mp2"></div>
      </td>
    </tr>

    <tr>
      <td class="row">Logged Time</td>
      <td>
        <div id="p3"></div>
      </td>
      <td>
        <div id="p31"></div>
      </td>
      <td>
        <div id="c3"></div>
      </td>
    </tr>
  </table>


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

Upvotes: 1

Views: 67

Answers (3)

nanj
nanj

Reputation: 105

The answer was to make my jQuery addClass and Remove Class to be more specific:

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

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

Upvotes: 0

Yadhu Babu
Yadhu Babu

Reputation: 1521

Check This

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

$("#stopAlarm").click(function() {
  $("#tableContainer").removeClass("blink");
   $("#status").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"></div>
      </td>
      <td>
        <div id="p11"></div>
      </td>
      <td>
        <div id="c1"></div>
      </td>
      <td>
        <div id="ca1"></div>
      </td>
      <td>
        <div id="m1"></div>
      </td>
      <td>
        <div id="mp1"></div>
      </td>
    </tr>

    <tr id="status" class="status">
      <td class="row">Status</td>
      <td>
        <div id="p2"></div>
      </td>
      <td>
        <div id="p21"></div>
      </td>
      <td>
        <div id="c2"></div>
      </td>
      <td>
        <div id="ca2"></div>
      </td>
      <td>
        <div id="m2"></div>
      </td>
      <td>
        <div id="mp2"></div>
      </td>
    </tr>

    <tr>
      <td class="row">Logged Time</td>
      <td>
        <div id="p3"></div>
      </td>
      <td>
        <div id="p31"></div>
      </td>
      <td>
        <div id="c3"></div>
      </td>
    </tr>
  </table>


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

Upvotes: 0

Barmar
Barmar

Reputation: 781096

All the elements that have their own background-color style won't inherit the style from the container. You need to put the class on those elements.

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

$("#stopAlarm").click(function() {
  $("#tableContainer td, #tableContainer th").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"></div>
      </td>
      <td>
        <div id="p11"></div>
      </td>
      <td>
        <div id="c1"></div>
      </td>
      <td>
        <div id="ca1"></div>
      </td>
      <td>
        <div id="m1"></div>
      </td>
      <td>
        <div id="mp1"></div>
      </td>
    </tr>

    <tr>
      <td class="row">Status</td>
      <td>
        <div id="p2"></div>
      </td>
      <td>
        <div id="p21"></div>
      </td>
      <td>
        <div id="c2"></div>
      </td>
      <td>
        <div id="ca2"></div>
      </td>
      <td>
        <div id="m2"></div>
      </td>
      <td>
        <div id="mp2"></div>
      </td>
    </tr>

    <tr>
      <td class="row">Logged Time</td>
      <td>
        <div id="p3"></div>
      </td>
      <td>
        <div id="p31"></div>
      </td>
      <td>
        <div id="c3"></div>
      </td>
    </tr>
  </table>


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

Upvotes: 1

Related Questions