仅当 html 表中未设置背景时如何更改背景颜色答案

【问题标题】：How to change background color only if background is not set in html tables仅当 html 表中未设置背景时如何更改背景颜色
【发布时间】：2020-02-24 07:09:26
【问题描述】：

下表包含一些类型的类。我想通过单击更改颜色单元格1 和2，这意味着只有在每个单元格中没有设置背景颜色时才会更改颜色。

有什么方法可以解决这个问题吗？谢谢

$(function() {
  $("td").click(function() {
    $(this).css('background-color','yellow');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

【问题讨论】：

这可能会有所帮助stackoverflow.com/questions/11517150/…

标签： javascript jquery html css html-table

【解决方案1】：

您可以添加将赋予它background:yellow 样式的类。这样，每当 id 赋予它任何其他颜色时，id 选择器样式将获得优先级，尽管类；

$(function() {
  $("td").click(function() {
    $(this).addClass('default-yellow');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}
.default-yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

【讨论】：

【解决方案2】：

在点击事件处理程序中，首先检查元素上是否设置了任何颜色，只有当它不符合您要求的条件时才更改颜色。您可以使用$(this).css('background-color') 获取当前颜色。

$(function() {
  $("td").click(function() {
    if ($(this).css('background-color') === 'rgba(0, 0, 0, 0)') {
      $(this).css('background-color', 'yellow')
    }
  });
});

#aqua {
  border-bottom: 3px solid aqua;
}

#green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="aqua">2</td>
  <td id="green">3</td>
</table>

【讨论】：

【解决方案3】：

$(function() {
  $("td").click(function() { 
    $(this).addClass('test');
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}
.test{background:yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

【讨论】：

【解决方案4】：

您可以检查元素是否具有透明背景色

$(function() {
  $("td").click(function() {
    if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)') {
      $(this).css('background-color','yellow');
    };
  });
});

#aqua {
    border-bottom: 3px solid aqua;
}
#green {
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="aqua">2</td>
<td id="green">3</td>
</table>

【讨论】：