How to apply font-weight:bold to table tbody tr td elements with values greater than 0 without using a loop in JavaScript or jQuery?
The selector should be $(table tbody tr td) without utilizing the $.each function.
Here is an example of the HTML structure:
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>Having a need for Jquery? Here's what you can do:
$('table td').css('font-weight', 'bold');
To achieve styling without the need for looping and with values set client side, you can utilize a combination of CSS `attr()`, pseudo elements like `::after`, and attribute selectors.
Instead of setting values directly inside the element, your client-side routine can assign values to the attribute `data-value=""`. By following this approach, you can then apply the following CSS rules to style the cells:
To implement styling based on whether an element is empty or not, you can utilize the CSS selector :empty in the following manner:
#example td{
background-color: magenta;
color: #FFF;
}
#example td:not(:empty){
background: blue;
}
#myTable td:not(:empty){
font-weight: bold;
}<table id="example">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
<table id="myTable">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>To retrieve the value and apply a function to check it, you can utilize .text(). If the value is greater than 0, it will be displayed in bold without requiring additional HTML attributes in the code provided.
Take a look at this example below:
tds = $('table tr td').text(function(index, text){
return text > 0 ? $(this).css({"font-weight": "bold"}).text() : text;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>Using the JQuery selector :contains() is the key to extracting cell text
$('table td:contains("0")').attr('style','font-weight:bold');
$('table td:contains("test")').attr('style','background-color:yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border=1 width=200 value=9>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>3</td>
<td>test</td>
</tr>
</table>To achieve a bold style on table cells, you can utilize the following CSS code:
table tbody tr td {
font-weight: 700;
}
This will render the text inside the table cells in a bold format. In case there are no table cells to display, the CSS rule will not be applied.
I have successfully loaded a blade view into another using ajax. However, the Javascript written in the main file does not seem to work for the loaded file. How can I resolve this issue? bladeView <span class="selectable " id="" name=""> Rate Here ...
I'm struggling with coding and thought I'd reach out for help here. Can anyone provide a solution to my problem? Issue - I have a navigation link on my main page that scrolls to an ID using jQuery. It works fine on the main page, but not on any ...
I am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...
I am experiencing a challenge with implementing multiple accordion menus on my website. Whenever I attempt to duplicate the code, the new accordion menu appears but clicking on the first bar simply scrolls me back to the top of the webpage. Below is the H ...
I am currently facing an issue with my Redux store setup. I am attempting to store an array of Session objects, where each Session object contains an array of Hand objects. However, when trying to access my store using `mapStateToProps`, none of the option ...
I am currently working on generating a filtered, sorted, and sliced list of data items in my Angular application. After successfully sorting and slicing the data, I encountered an issue when using dataHandler.filter. The error message 'Cannot read pro ...
It's a straightforward process, I import my OBJ model that was exported using 3DS Max. I have the intention of coloring a specific section of the Object. During the animation loop, I implement the following: scene.traverse( function( object ) { ...
After struggling for hours, I made the decision to go back and thoroughly read through the entire cordova documentation. During this process, I made an interesting discovery. According to the documentation, in order to add support or rebuild a project for ...
Currently, I am working with the "colorbox" jQuery plugin and I have a specific requirement to dynamically load a set of preloaded image objects into colorbox. The challenge lies in the fact that I have three different image sizes - thumbnail, display, an ...
If I have a modal template structured like this: <div class="modal-header"> <h3 [innerHtml]="header"></h3> </div> <div class="modal-body"> <ng-content></ng-content> </div> <div class="modal-footer"& ...
I recently integrated React into an existing project, following the guidelines outlined here: https://reactjs.org/docs/add-react-to-a-website.html. Now, I'm facing an issue where I am unable to import any files (both .js and .css) into my main compone ...
I am currently working on creating a fixed header that remains at the top of the page. However, I am facing an issue where the background seems to be overlapping and hiding the header. <style type="text/css> html, body {height:100%; margin:0; paddin ...
I've set up an XML File and an HTML document in the htdocs directory of my local Apache server. However, I am encountering issues while attempting to read the XML file. There doesn't seem to be any response or alert for the status, even when prov ...
Struggling to retrieve the table values accurately. Is there a way to access the header value of the cell I click on? Additionally, how can I obtain the Uid based on the cell clicked, like getting the Uid of a person when clicking on their name? https://i ...
What is the best way to format a date for ajax purposes? I need to send a date through ajax using a hidden input textbox and want to serialize it in order to execute a query with coldfusion. HTML (automatically captures the date) JS var Tmrwdate = $(&ap ...
When attempting to post data to the server using an AJAX call, I encountered an error. var userDetails = {}; userDetails["Name"] = "Saran"; var DTO = { 'userDetails': userDetails }; $.ajax({ type: "POST", contentTyp ...
I am currently utilizing the Materialize CSS library and I came across an interesting feature for creating an #autocomplete dropdown (located at the end of the page). However, upon trying to implement it, an error keeps popping up while typing. Uncaugh ...
Is there a way to make the top navbar span 100% of the width? I've tried various methods, such as setting the width to 100% and even using <br> out of desperation. I also came across advice not to use rows with the navbar and attempted to stick ...
I am currently in the process of developing a TicTacToe game and have a requirement to maintain the current player in state under the name currentPlayer. The idea is that after one player makes a move, I need to update currentPlayer to represent the opposi ...
Here's my forms layout: <body> <p>Please note that this form is solely for illustrating the Required Field Validator and does not perform any actual function.</p> <form id="frmValidator" method="post" runat=" ...