Obtain text generated by CSS within a <td> element using JQuery

I am faced with a table structured 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 section

<div id="state" class="state-c"> </div>
displays different statuses such as "Approved", "Rejected", etc, which are generated using CSS:

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

However, I am encountering difficulty in retrieving the text value of these table cells. While I can successfully extract text from other cells using the .text() method, it does not work for the CSS-generated text "Confirmed". I have attempted methods like getGeneratedStyle, .value, and spent hours researching solutions, but to no avail.

Therefore, my query is: How can I retrieve the dynamically generated text within the

<div id="state" class="state-c"> </div>
which appears empty in the code?

Answer №1

If you want to retrieve it, you can achieve this by utilizing 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>

Answer №2

let cssCode = '.state-c:before { content: "Confirmed";}';
let match = cssCode.match(/"(.*?)"/);
alert(match[1]); // This will display the text inside quotes

Simply provide the CSS code as a string to extract the text within double quotes. Hopefully, this tip proves useful!

Answer №3

One potential solution is to use the .find("#state").text("my text") method.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The coordinates of the event do not match the coordinates of the location. Successful AJAX response data

How can I retrieve the accurate latitude and longitude when the Google Maps marker finishes dragging? It's confusing because for the same exact point, two different (but very approximate) coordinates are provided. Here are some example results for t ...

Move your cursor over an image to modify the z-index of another image

I am facing an issue with my webpage that consists of 6 small images and one large image in the center, made up of six layers each containing one image, similar to this example: http://jsbin.com/onujiq/1/. I have set the z-index property of all center imag ...

Cease the video playback in the modal when the modal is closed

I've attempted several solutions found on stack overflow, but none of them seem to be effective. When I replace the video tag with an iframe, some solutions work, but the video autoplays again, causing issues with the solution. <div class="ico ...

Unable to close jQuery Mobile dialog following an AJAX request

My JQM listview, using version 1.1.0, is set up with an ajax call for each item in the list. Whenever a user taps on an item, the page behind the dialog should update accordingly. The issue I am facing is that the dialog does not close when a user taps on ...

Encountering Firebase error auth/admin-restricted-operation following createUserWithEmailAndPassword operation

Encountering a Firebase error (auth/admin-restricted-operation) when attempting to sign up with email, despite enabling user creation with email in project settings. Could the issue lie within my project settings? I have been scouring the internet for hour ...

Tips on transferring information from a child component to a parent component

Currently, I am exploring ways to transfer data from a child component to a parent component. After extensive research, I have yet to find a satisfactory solution. If anyone has a solution, could you please explain how to solve this issue? APP.js impor ...

Is there a way to reset the dynamic flexslider when a click event occurs?

Seeking a way to refresh the flexslider on a click event. I have embedded the flexslider in a Bootstrap pop-up and need it to update when the user clicks. The issue arises when I try to refresh the slider as it fails to display properly, likely due to losi ...

Using the mouseover event in three.js to interact with child meshes

My array, objMesh, contains multiple mesh objects. Each object has a children attribute, which in turn holds an array of more mesh objects (such as countries and their islands). How can I make it so that when I hover over each mesh object, its children are ...

Is there a way to extract values from an array in my database without needing to know the column name?

I've been attempting to link my database to my web app, but I'm encountering an issue where I'm receiving too much information than necessary. The code snippet I've implemented so far looks like this: var express = require("express"); ...

Error: The node is unable to parse JSON data through the API

After loading a JSON file as a string, attempting to parse it back to JSON and send it as a response: router.get('/todos', (req,res) =>{ let todos = fs.readFile('todos.json', 'utf8',(err, data) =>{ if (err) ...

I'm encountering an issue in React Native Firestore where the use of "where" results in the startAfter method

const animalsData = []; let snapshot = null; try { if (!lastVisible) { snapshot = await firestore() .collection("animals") .where("species", '==', selectedType) .orderBy('timestamp&ap ...

"Modify the color of a div element by changing it from the color name to the hexadecimal

Is there a way to use color codes instead of typical color names, like #e06666 for red? content.push('<p><div class="color red"></div>Whole Foods Market</p>'); Any suggestions on how to achieve this? ...

Can a fully operational "contact us" page be created with just HTML and CSS?

Is it feasible to create a "contact us" page that operates properly using only HTML/CSS? For instance, allowing a user to visit the "contact" page and input their email address and message, which would then be sent directly to my email. Would this be ach ...

Adjusting the dimensions of a div to accommodate varying text lengths

I'm currently facing an issue where I have multiple divs all sharing the same "Text" class. These divs don't have set width or height values, and are adjusting based on the content inside them, which varies in width. The problem arises when other ...

What is the best method to retrieve the unique identifier of the user who is currently logged in

I'm currently facing an issue with accessing the data of the authenticated user in my code and figuring out how to fetch it. I have completed the authentication flow, allowing users to register and login successfully with a token. Even after refreshi ...

Leveraging jQuery alongside HTML5 Video

I have a website that offers live streaming services. I wrote some code specifically for iPads which successfully plays the stream: window.location = 'http://<?php echo DEVSTREAMWEB; ?>/<?php echo $session_id;?>/'+camerahash+'/p ...

Utilize react-router-dom for conditional rendering based on button clicks

When the user types in "user" in the text box, they will be directed to the user page. If they type "admin", they will be redirected to the admin page. This code belongs to me. constructor(props) { super(props); this.state = { userType : 0 ...

What is the best way to incorporate several functions within a resize function?

Is it possible to incorporate multiple functions within the windows.width resize function? I have been experimenting with some code, but I would like to restrict its usage to tablet and mobile devices only, excluding laptops and PCs. Any suggestions on h ...

Modify the alignment and orientation of the data within RadHtmlChart

I have a chart: <telerik:RadHtmlChart ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto"> <PlotArea> <Series> ...

Issue with ASP Handler failing to send error message to ajax request in a managed hosting environment

When making an ajax call to a Handler, I am trying to return an error from a Stored Procedure in SQL. Below is the code for my ajax call: $.ajax({ url: "Handlers/MyHandlerCall.ashx?QueCtrlType=1" co ...