how to animate table row
Question
I am not sure why is my table cell is not animating after click on a button. I want the whole row to animate into a different colour in specific time.
$("#buttonObserve").click(function() { $("#trl1").animate({ backgroundColor: "#FFD801" }, 1000); });
#tableLast { border-collapse: collapse; width: 80%; } #tableLast td, #tableLast th { border: 1px solid #ddd; padding: 8px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tableLast" align="center"> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> <tr id="trl1"> <td id='tdl1'>1</td> <td id='tdl2'>2</td> <td id='tdl3'>3</td> <td id='tdl4'>4</td> </tr> </table> <button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button>
2 answers
solution1
1 2019-10-31 07:08:04
<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
You need to import this js file to animate color.
solution2
1 ACCPTED 2019-10-31 07:15:02
2 Problems here:
First , you need to wrap javascript code inside $(document).ready.
Second , you need to import 'jquery.color.js' file.
Here's the working code.
$(document).ready(function(){ $("#buttonObserve").click(function () { $("#trl1").animate({backgroundColor: "#FFD801"}, 1000); }); });
<html> <head> <style> #tableLast{ border-collapse: collapse; width: 80%; } #tableLast td, #tableLast th{ border: 1px solid #ddd; padding: 8px; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script> <table id="tableLast" align="center"> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> <tr id="trl1"> <td id='tdl1'>1</td> <td id='tdl2'>2</td> <td id='tdl3'>3</td> <td id='tdl4'>4</td> </tr> </table> <button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can specified table data be animated within a table row with ng-animate?
asp mvc animate removing table row
Animate a button on a table row using Angular cause the whole row's button to animate
Jquery animate not working. I need to add a row to table with animation
How to animate display table to none or zero height?
How to animate left side border in the table of content
how to animate element in table cell by cell?
How to animate table Rows while swaping
How to update table row?
How to delete row in table?
Related Tags