Question

我有一张包含各种动态生成背景颜色的表格。我想使用jQuery使用单元格的实际背景颜色填充表格单元格内容。我可以使用$("td").text("new contents");来更改单元格的内容。我尝试$("td").text($(this).css("backgroundColor"));将背景颜色放入单元格中，但背景颜色没有通过。

＆＃13;

$("td").text(
  $(this).css("backgroundColor")
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>lighten</td>
    <td style="background-color: #d379a6;">10%</td>
    <td style="background-color: white;">50%</td>
    <td style="background-color: white;">100%</td>
  </tr>
    <tr>
    <td>darken</td>
    <td style="background-color: #ad3972;">10%</td>
    <td style="background-color: #14060d;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
  <tr>
    <td>mix</td>
    <td style="background-color: #b24a7e;">10%</td>
    <td style="background-color: #632946;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
</table>

＆＃13;

Answer 1

请改为尝试：

$("td").text(function() {
    return $(this).css("backgroundColor");
});

.text方法可以将函数作为参数。在这种情况下，此函数必须返回值，以用作集合中元素的新文本内容。

您的版本$("td").text($(this).css("backgroundColor"));不正确，因为在这种情况下this指向全局对象（window对象），显然$(this).css("backgroundColor")不返回任何内容。

＆＃13;

$("td").text(function() {
    return $(this).css("backgroundColor");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>lighten</td>
    <td style="background-color: #d379a6;">10%</td>
    <td style="background-color: white;">50%</td>
    <td style="background-color: white;">100%</td>
  </tr>
    <tr>
    <td>darken</td>
    <td style="background-color: #ad3972;">10%</td>
    <td style="background-color: #14060d;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
  <tr>
    <td>mix</td>
    <td style="background-color: #b24a7e;">10%</td>
    <td style="background-color: #632946;">50%</td>
    <td style="background-color: black;">100%</td>
  </tr>
</table>

＆＃13;

Answer 2

接受的答案解决了我遇到的问题，但我也希望颜色以十六进制显示，这不是jQuery返回的内容。所以我从Can I force jQuery.css("backgroundColor") returns on hexadecimal format?移植了一个解决方案。这是我最终实现的最终jQuery：

$("td").text(function() {
  color = $(this).css("backgroundColor");
  bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
});

如何将内容设置为背景颜色？

2 个答案: