Here is some HTML code that needs styling:
<tr>
<td>Test</td>
<td>324</td>
</tr>
The default CSS setting is text-align:left
However, I am looking to apply text-align:center to any <td> element that contains digits.
Since I have around 50 HTML files, manually adding a class is not feasible.
To enhance your code, utilize the power of the filter function combined with some clever regex patterns:
$('td').filter(function() {
return /^\d/.test($(this).text());
}).css('text-align', 'center');
If you require a more intricate regex pattern, consider using the following:
/((?!\w+[^\s]))\d+\1/
This regex will accurately match instances like (space)123 and 123(space), while excluding cases such as 123a and asd 123, allowing only numbers and spaces. To include additional valid characters, simply add them within square brackets like [^\s,], making characters like comma , permissible as well.
Classic approach that gets the job done:
function RemoveWhiteSpace(str){
return str.replace(/^\s+|\s+$/g,"");
}
function ApplyCustomCssToCertainTds(){
for(i=0;i<document.getElementsByTagName('td').length;i++){
var tdElement = document.getElementsByTagName('td')[i];
if(!isNaN(RemoveWhiteSpace(tdElement.innerHTML))){
tdElement.style.textAlign = "center";
}
}
}
$(document).ready(function(){
$("td").filter(function(){
return (/^\s*\d*\.?\d+\s*$/).test(this.innerHTML);
}).css("text-align","center");
});
UPDATE: check out this example on jsfiddle: http://jsfiddle.net/Avf7P/
If you're looking for an example of how to add a class using jQuery, you can take a look at this demo. The class 'centerMe' sets the text-align property to center.
$('td').each(function(){
if($.isNumeric($(this).html()))
{
$(this).addClass('centerMe');
}
});
Keep in mind that this code uses isNumeric, which may not suit your needs. If that's the case, you can adjust it to use a regular expression method mentioned in other solutions.
I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...
I am working with a flex container setup like this: .container { display: flex; flex-flow: row wrap; justify-content: start; width: 100%; } .item { border: 1px solid red; flex: 1 1 33%; height: 100px; } <div class="container"> <d ...
Embarking on the challenging Mars Rover Kata has presented a unique problem for me. My jasmine tests are failing because of my array compare method within the prototype. This method is crucial for detecting obstacles at specific grid points. For instance, ...
I'm experiencing issues with Jquery UI Combobox and asp.net The DropDown is not functioning properly. Encountering a JavaScript error "Uncaught TypeError: Cannot set property '_renderItem' of undefined" 'input.data("ui-autocomplete"). ...
I am incorporating React into my web application. I understand how to implement the toggle logic - maintaining a boolean value in my state and updating it when I interact with the toggle trigger. However, I am struggling with how to add animation to this ...
I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...
Currently, I am developing an Electron-App using NPM that functions as an installer by unzipping a file to a specified directory. While everything works smoothly when I build the application and run it from the win-unpacked folder, moving the folder to a d ...
I have a couple of .js files: main.js require("./randomEvent.js").begin("hey"); require("./randomEvent.js").begin("hi"); require("./randomEvent.js").begin("hello"); randomEvent.js var repeat = true; exports.begin = (uniqueString) => { while (repe ...
I am facing an issue with sending a variable through an ajax function. The scenario is as follows: <a href="next.php" onclick="sendajax()">reload</a> I need to send this variable via the POST method in my php page: <script> fu ...
Hey there, I'm encountering an issue where the if statement check in my code is causing a "too many rerenders" problem. I'm trying to create a delay between pulling data from the database and calculating the BMI. Any suggestions on how to resolve ...
The issue arises from calling Directive1 within the same Directive1 using ng-repeat. Although directive11 has a value in scope, when calling the nested directive with a new value, it appears to retain the initial value. I attempted to invoke the same dire ...
Have: project |- consume_script.js |- index.html Need index.html to be like: <html> <head> </head> <body> <script src="consume_script.js"></script> </body> </html> Issue: consume_script ...
url_main = "https://comic.naver.com/webtoon/detail.nhn?titleId=131385&no=292" This particular website features a comment pagination at the bottom of the page. Upon inspecting the page, I noticed that the buttons were structured like this: &l ...
Currently, I am in the process of developing a webpage that involves incorporating four distinct JSON entities (objects, arrays). Excuse my lack of appropriate jargon. Upon receiving the JSON data, it is structured as an object with numerous sub-objects, ...
I've been grappling with this issue for hours and could really use some assistance. My goal is to create a Chat component that allows vertical scrolling, but I've hit a roadblock. Here's a simplified version of the problem on Codesandbox: ht ...
There is JSON data stored in a file that I need to read. The correct file data is printed to the console.log. What steps should I take to assign this data to variable x? Currently, when I execute the code, x ends up being undefined. function getData() { ...
I have a dynamic radio button list (rblCategories) that, when the selected value changes, triggers the creation of a checkbox list using ajax and populates it. However, I am facing an issue with updating my datatable when any checkbox is checked/unchecked ...
Attempting to outline the limitations at hand. We have 3 containers named .content, .left, and .bottom, along with a resize handler that governs the available space. I aim for the .container to expand as the space increases, utilizing all available area. ...
Ever since updating to ColdFusion 2016 Update 4, I've been experiencing a new issue. Here's the code snippet: <input type='button' name='btn' value='Click me' onclick='proxyFunc();'> Incorporating ...
My goal with React JS is to develop a website similar to Tiktok, where the video below will automatically play with sound as the user scrolls down. I attempted to set this up using window.addEventListener("scroll",...), but after looking into it further, ...