Question

我有如下表格。

我想通过单击并在其上进行鼠标悬停和鼠标悬停来更改颜色。我实现了这种着色，但是我想显示颜色过渡。

例如，我想要的结果是第一次单击时，td的颜色将变为绿色，然后然后，当我们单击绿色的单元格时，颜色将变为黄色。

如何实现这种颜色过渡？

如果您已经有经验，请告诉我。

$(function () {
      var first;
      var second;
      $("#table td")
        .mousedown(function () {
          first = this.id;
          console.log("first",first);
          return false; // prevent text selection
        });

      $("#table td")
        .mouseup(function () {
          second = this.id;
          console.log("second",second);

          if(first==second){
            changecolor(first,"0f0");
          }
          else if(first<second){
              for (var i=first;i<=second; i++)
                changecolor(i,"aqua");
              }
          else{
              for (var i=second;i<=first; i++)
                changecolor(i,"aqua");}            
          return false;
        });
    });

      function changecolor(id,color){
  $("#"+id).css("background-color",color);}

Answer 1

不确定这是否是您要寻找的，但是您可以尝试以下两种版本。

长版：

$(function () {
    $("td").mousedown(function () {
        const green = "rgb(0, 128, 0)"
        const yellow = "rgb(255, 255, 0)"
        if ($(this).css('background-color') == green )
            changecolor(this, yellow)
        else
            changecolor(this, green)
        return false
    });
});

function changecolor(el, color) {
    $(el).css("background-color", color);
}

简短版本：

$(function(){
  $("td").mousedown(function(){
    $(this).css('background-color',
        $(this).css('background-color') == "rgb(0, 128, 0)" ?
            "rgb(255, 255, 0)" : "rgb(0, 128, 0)")
    return false
  });
});

Answer 2

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        }

        td,
        th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        .green{
            background-color:green;
        }
        .yellow{
            background-color:yellow;
        }
    </style>
    <title>Untitled Document</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <table id="table">
                    <thead>
                        <tr>
                            <th>name</th>
                            <th>age</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                        <tr>
                            <td class="">john</td>
                            <td class="">23</td>
                        </tr>
                        <tr>
                            <td class="">tony</td>
                            <td class="">26</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <script>
        $(document).ready(function(){
            $("#tbody td").click(function(){
                let className = $(this).attr('class')
                if(className == ''){
                    $(this).addClass('green')
                }
                else if(className == "green"){
                    $(this).removeClass('green')
                    $(this).addClass('yellow')
                }
                else{
                    console.log("do something")
                }
            })
        })
    </script>
    </body>
</html>

尝试

如何通过单击单元格更改颜色

2 个答案: