在< td>中获取CSS生成的文本与Jquery [英] Get CSS generated text inside a <td> with Jquery

问题描述

我有这样的表：

 < 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 =stateclass =state-c> < / div>< / td> 
< td>< a href =modify.php？id = 222>< span class =bt-edit> EDIT< / span>< / a>< / td> ; 
< / tr> 
< table> 
 

< div id =stateclass = c>。 < / div> 告诉已批准，已拒绝等，由CSS生成：

  .state-c：before {
 content：Confirmed; 
} 
  

现在我需要获取这些表格单元格的文本值，单元格我成功地使用 .text（）方法，它不会得到CSS生成的文本已确认。我尝试使用 getGeneratedStyle ， .value ，并且一直在搜索信息的时间，但没有运气。 p>



我的问题是：如何获得生成的文本< div id =stateclass =state-c>

解决方案

使用 window.getComputedStyle 获得它。

  var text = window.getComputedStyle $（'＃state'）[0]，'：before'）。contentalert（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 =stateclass =state-c> < / div>< / td> < td>< a href =modify.php？id = 222>< span class =bt-edit> EDIT< / span>< / a>< / td> < / tr>< table>  

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?

解决方案

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>

这篇关于在< td>中获取CSS生成的文本与Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！