Javascript 如何在html表格中更改颜色，如对半和对半

我创建类似于日历的html表格。 某些事件已在日历中注册。每个事件都以其颜色区分

但我想改变它的颜色，就像半个半细胞一样

我想要的形象是这样的

现在我的代码是这样的。 事件通过单击绑定。 可能吗？我怎么能意识到这一点

如果有人遇到同样的问题，请让我知道

      $("#our_calendar td")     
      .click(function() {

          const green="rgb(0, 255, 0)";
          const yellow="rgb(255, 255, 0)";
          const transparent="rgba(0, 0, 0, 0)";
          const red="rgb(255, 0, 0)";
          const purple="rgb(255, 0, 255)";

          console.log($(this).css('background-color'));


          if ($(this).css('background-color') == transparent)
            changecolor(this.id, green);
          else if ($(this).css('background-color') == green)
            changecolor(this.id, yellow);
          else if ($(this).css('background-color') == yellow)
            changecolor(this.id, purple);
          else 
            changecolor(this.id, transparent);
      });

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

---

在元素中尝试以下样式

background: linear-gradient(to bottom, yellow 50%, green 50%);

---

在元素中尝试以下样式

background: linear-gradient(to bottom, yellow 50%, green 50%);

---

与DileepNimantha的解决方案类似，但具有即时切断功能：

background: linear-gradient(to bottom, yellow 49%, yellow 1%, green 1%, green 50%);

---

与DileepNimantha的解决方案类似，但具有即时切断功能：

background: linear-gradient(to bottom, yellow 49%, yellow 1%, green 1%, green 50%);

---

试着这样做：

background: linear-gradient(to bottom, green 50% 50%, yellow 50% 50%);

---

试着这样做：

background: linear-gradient(to bottom, green 50% 50%, yellow 50% 50%);

---

尝试使用css线性渐变：尝试使用css线性渐变：