在事件上设置HTML表格单元格（或整行）的背景颜色 [英] Animating the background color of an HTML table's cell (or the whole row) on an event

问题描述

我有一张带有几行和一列菜单（食品）的表格。
第二栏包含食品项目的链接。当用户点击它时，
将商品添加到购物车中。

我想给用户一些视觉反馈，指出点击和添加
实际工作。我已经有一个链接点击处理程序，添加了点击购物车的
项目。一个简单的警报（'成功添加的项目'）;
可以工作，但并不是很好。

我希望表单元格（或整行）闪光一次。通过闪烁
我的意思是将背景颜色从当前（浅灰色）平滑地改变为
，例如黄色然后恢复到正常。这应该只发生一次。

我使用jQuery 2.x和Bootstrap 3.x。

到目前为止，我的（简化）代码如下所示：

$（'a [href =＃]'）。on '，function（event）{//代码将项目添加到购物车（AJAX），这里省略//在成功返回AJAX数据时：$（this）.closest（'tr'）。css（'background-颜色'，'黄色'）;}）; < code>

使行闪烁而不是简单地改变它的背景颜色？

解决方案

通常最好使用CSS类而不是直接操作样式：

  tr {background-color：white; transition：background-color 1s;}。时尚{background-color：orange; transition：background-color 1s;}  

< script src = https://code.jquery.com/jquery-2.2.0.min.js >< /脚本><表> < TR> < TD→1< / TD> < td>< a href =＃>汉堡包< / a> < / TD> < TD> 2.65< / TD> < / TR> < TR> < TD> 2'; / TD> < td>< a href =＃>芝士汉堡< / a> < / TD> < TD> 3.25< / TD> < / tr>< / table>

小提琴演示

I have a table with a menu (food items) with several rows and columns. The 2nd column contains a link to the food item. When the user clicks it, the item is added to a shopping cart.

I'd like to give the user some visual feedback that the click and adding actually worked. I already have a click handler for the link that adds the item clicked on to the cart. A simple alert('Item successfully added'); works but is not really pretty.

I'd like the table cell (or the whole row) to "flash" once. By "flashing" I mean "change its background color smoothly from current (light gray) to e.g. yellow and then back to normal". This should happen only once.

I'm using jQuery 2.x and Bootstrap 3.x.

My (simplified) code so far looks like this:

  $('a[href="#"]').on('click', function(event) {
    // code to add the item to shopping cart (AJAX), omitted here
    // Upon successful return of the AJAX data:
    $(this).closest('tr').css('background-color', 'yellow');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td><a href="#">Hamburger</a>
    </td>
    <td>2.65</td>
  </tr>
  <tr>
    <td>2</td>
    <td><a href="#">Cheeseburger</a>
    </td>
    <td>3.25</td>
  </tr>
</table>

How do I make the row flash instead of simply changing its background color?

解决方案

It's often best to use CSS classes rather than directly manipulating styles:

$('a[href="#"]').on('click', function(event) {
    // code to add the item to shopping cart (AJAX), omitted here
    // Upon successful return of the AJAX data:
    var myRow = $(this).closest('tr');

    myRow.addClass('stylish');

    setTimeout(function() {
        myRow.removeClass('stylish');
    }, 1000);
});

tr {
    background-color: white;
    transition: background-color 1s;
}

.stylish {
    background-color: orange;
    transition: background-color 1s;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<table>
    <tr>
        <td>1</td>
        <td><a href="#">Hamburger</a>
        </td>
        <td>2.65</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Cheeseburger</a>
        </td>
        <td>3.25</td>
    </tr>
</table>

Fiddle demo

这篇关于在事件上设置HTML表格单元格（或整行）的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！