Get CSS generated text inside a <td> with Jquery [duplicate]

Question

I have a table like this:

<table id="orders">
  <tr>
    <td>05/06/2005</td>
    <td>3216549</td>
    <td>description</td>
    <td>2.000,00</td>
    <td>100</td>
    <td>20,00</td>
    <td><div id="state" class="state-c"> </div></td>
    <td><a href="modify.php?id=222"><span class="bt-edit">EDIT</span></a></td>
  </tr>
<table>

the part <div id="state" class="state-c"> </div> tells "Approved", "Rejected", etc, and is generated by CSS:

.state-c:before {
  content: "Confirmed";
}

now I need to get the text value of these table cells, while for all the cells I successfully use .text() method, it doesen't get the CSS generated text "Confirmed". I tried to use getGeneratedStyle, .value, and have been searching for hours for information, but no luck.

My question is: how can I get the generated text inside the <div id="state" class="state-c"> </div> which actually is empty if you look at the code?

Ledbetter

What's getGeneratedStyle? Did you mean getComputedStyle? – Gosselin

you change the class for change the text ? state-c, state-a, state-r... ? – Typescript

Do you mandatorily need with jQuery? Is vanilla JS unacceptable? – Acro

take a look at this, i suggest you should do it this way #7882825 – Cryptogenic

Possible duplicate of #5041994 (the answer by Blazemonger to be precise) – Acro

Answer 1

You can get it like following using window.getComputedStyle.

var text = window.getComputedStyle($('#state')[0], ':before').content
alert(text)

.state-c:before {
  content: "Confirmed";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="orders">
  <tr>
    <td>05/06/2005</td>
    <td>3216549</td>
    <td>description</td>
    <td>2.000,00</td>
    <td>100</td>
    <td>20,00</td>
    <td><div id="state" class="state-c"> </div></td>
    <td><a href="modify.php?id=222"><span class="bt-edit">EDIT</span></a></td>
  </tr>
<table>

Deliladelilah

Beat me to it. Here's a working example: jsfiddle.net/1n5pw8vk Note that the selector should be .state-c, not #state – Foresee

Thanks. But #state is working. @RoryMcCrossan – Deliladelilah

Answer 2

var s = '.state-c:before { content: "Confirmed";}';
var m = s.match(/"(.*?)"/);
alert(m[1]); // m[1] = quoted

just pass the css as a string and get the text inside double quotes. hope this will help you

Danonorwegian

Answer 3

Maybe you can try .find("#state").text("my text")

Ritualism