Question: I have a table with a variety of dynamically generated background colors. I'd like to use jQuery to populate the table cell contents with the cell's actual background color. I can use `$("td").text("new contents");` to change the contents of the cells. I tried `$("td").text($(this).css("backgroundColor"));` to put the background color into the cell, but the background color doesn't come through.

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

```html
<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>
```

Answer: 
Try this instead:

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

```

[.text](http://api.jquery.com/text/) method can take a function as argument. In this case this function must return value to be used as new text content for elements in collection.

Your version `$("td").text($(this).css("backgroundColor"));` is incorrect because in this case `this` points to global object (which is `window` object) and obviously `$(this).css("backgroundColor")` returns nothing.

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

```html
<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>
```
The accepted answer solved the problem I was having, but I also wanted the colors to be displayed in hex, which isn't what was returned by jQuery. So I ported in a solution for that from [Can I force jQuery.css("backgroundColor") returns on hexadecimal format?](https://stackoverflow.com/questions/6177454/can-i-force-jquery-cssbackgroundcolor-returns-on-hexadecimal-format). This is the final jQuery I ended up implementing: 

```
$("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]);
});

```