Is it possible to apply a styling to a table data cell based on the table header relationship

Let's say I have a table header with content like this...

<th>
  <div class="text-left field-sorting " rel="local_inventory"> Local inventory </div>
</th>
<th>
  <div class="text-left field-sorting " rel="something else1"> Something Else1 </div>
</th>
<th>
  <div class="text-left field-sorting " rel="something else2"> Something Else2 </div>
</th>

and now I am looking to style the corresponding table data cells...

<td>4</td>
<td>0</td>
<td></td>

in a way that applies a certain style only if the cell is not empty and its value is greater than 0. I am thinking of using jQuery to add CSS dynamically. If this is not possible, I might need to modify the PHP script that generates this data table. Since I can access the table header elements, my question is how to leverage that to target the related table data cells in the same column, even if they don't have any unique identifiers.

javascriptjqueryhtmlcss

Answer №1

Are you considering using the .filter function in this scenario?

$('td').filter(function(){
  var content = $.trim($(this).text());
  return content.length && +content > 0;
}).addClass('greater-than-zero');

Feel free to check out this brief demonstration: http://jsbin.com/abovow/1/edit

After further clarification, how about this approach?

$('td, th').addClass(function(index){
 return 'col-' + ( $(this).index() + 1 );
});

Here's a demo for reference: http://jsbin.com/abovow/4/edit

Answer №2

To style the td elements, you can utilize the nth-child selector. This will allow you to target all the td elements that correspond to the th element in the same column.

If you need to create a selector based on the th condition using CSS alone, it may not be possible. In such cases, utilizing jQuery or adding a specific class may be a better solution.

tr td:nth-child(2) { // Styles the 2nd td within each tr
    // Your styles here
}

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 dimension of HTML on an IOS web application

After successfully designing a web app that works well on desktop browsers and iPad Safari, I encountered an issue when trying to install it as a hybrid app using cordova 3.3.0. The problem arises with the height not displaying properly. Despite including ...

ioshtmlcsscordova

Place the HTML images in the center of the page

I would like the two images to be centered on the page. Please refer to this visual representation for guidance: Here is the code snippet: * { box-sizing: border-box; } .column { float: left; width: 28%; height: 28%; padding: 5px; } /* Cle ...

htmlcss

Discover the process of incorporating secondary links into your dabeng organizational chart!

I need to incorporate dotted lines on this chart, such as connecting leaf level nodes with middle level nodes. import OrgChart from '../js/orgchart.min.js'; document.addEventListener('DOMContentLoaded', function () { Mock.mock(&apo ...

javascriptjquerycssorgchart

AngularJS navigates to specific URL paths instead of only displaying the corresponding HTML pages

Building a simple AngularJS application using the angular-seed starter template consists of: index.html app.js home/home.html home/home.js My objective is to navigate to home.html when clicking on the Home li item with the href="/home". However, the cur ...

javascripthtmlangularjsnode.jsangularjs-routing

Masonry grid showcasing a diverse image gallery with varying widths and heights

I have created a gallery layout for my website where I want to display images in a grid style that is both responsive and has random width and height. However, all the images I have are vertical, which creates a challenge for me. Any assistance on how to t ...

jqueryjquery-masonry

Identify modified fields and transmit using jquery and ajax communication

Unable to find a solution for this problem... I have created a form that uses jQuery to detect changes in field values and adds the 'edited' class if it has been edited, and 'editable' if it has not. When a button is clicked, I would ...

phpjqueryajax

Tips for arranging cards in columns without causing vertical scrolling to be triggered

I am working with Bootstrap 5 and have created a column with multiple cards: https://jsfiddle.net/fzxc1v69/ Currently, all the cards are displayed one below the other, but I want them to be lined up horizontally instead. In my code, the .section class i ...

htmlcssbootstrap-5

Guide to aligning several texts to the right using Bootstrap 4 breadcrumbs

I am looking to implement a breadcrumb using Bootstrap 4.1 that displays the sitemap path on the left and login links on the right. Below is a visual representation of what I aim to achieve: Home/Blog/post Re ...

htmldjangobootstrap-4

Exploring the functionality of Next.js with Links and routes

Currently, I am facing an issue with the popover menu in my header that displays products. The problem arises when I click on a product in the list; it navigates correctly to the path "products/some-product" regardless of the selected item. However, if I a ...

javascriptnext.js

Confirmation dialog with user-defined button text

When the confirm prompt box is used, it typically displays "ok" and "cancel" buttons. I am looking to customize the label text for the buttons to read as Agree and Not Agree instead. If you have any suggestions on how to achieve this modification, please ...

javascripthtml

Changing an array into a list using javascript

function convertArrayToList(inputArray) { let list = null; for (let i = inputArray.length - 1; i >= 0; i--) { list = { value: inputArray[i], rest: list }; } return list; } let result = convertArrayToList([10, 20]); console.log(JSON.stringi ...

javascriptarrayslistobject

Experiencing difficulties coding SVGs

Struggling with manipulating SVGs in JavaScript and looking to extend a line by clicking a button? Check out this code snippet I've included in the head tag: <script type="text/javascript"> x=135; y=135; var container = document.getElementById( ...

javascriptsvg

Learn how to effectively showcase various components by leveraging the new react-router-dom v6.0.0 alongside react-redux

My issue is that when I click on a link to render different components, the URL updates but the UI remains unchanged. No matter which item I click on to render, the same thing happens. I've tried numerous solutions to fix this problem without success. ...

javascriptreactjsreduxreact-reduxreact-router-dom

Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

My task is to develop a web application using HTML, CSS, and JS with the following functionality: Retrieve a list of users from this API: https://jsonplaceholder.typicode.com/users. Upon clicking on a user, show a list of albums associated with that user ...

javascripthtmlcssjsonajax

What is the best way to display a list of database records using Django?

Is there anyone who can assist me with this? I have a list of 60 records from a Django database in my HTML file. My goal is to display that list in a table with 6 columns and 10 rows. However, when using the {% for %} command in the HTML file, the list app ...

pythonhtmldjango

performing a jQuery AJAX call from a UIWebView during the initial launch of the app following installation

We have a uiWebview that uses jquery for an ajax request to log in. It functions flawlessly on mobile safari and all browsers. However, when the application is launched for the first time after installation, the ajax request seems to be sent out but no re ...

javascriptjqueryiosajaxuiwebview

Rely on the razor method for generating URLs

I need to direct to a specific page, so I have implemented a JavaScript function in my MVC project: function rootUrl(url) { var _rootUrl = '@Url.Content("~")'; var x = url; if (url. ...

javascriptjqueryasp.net-mvcrazor

Selecting elements by class in jQuery using a variable for the class name

Is there a way in jQuery to apply actions to all elements with a specific class, where the class name is determined by a variable? I want to select elements based on this dynamically generated class name. var x = $(this).attr('href').slice(1); ...

javascriptjqueryjquery-selectors

Making the dropdown width of the shiny selectInput customizable

Inspired by a discussion on Stack Overflow, this code snippet prevents dropdown text wrapping and sets the width for all dropdowns. Is it possible to individually adjust the width of each dropdown created with selectInput? library(shiny) ui <- (fluid ...

jqueryhtmlrshiny

Utilizing Express.js: Passing the req Object to Middleware without the Need for a New Multer Route

Hello to the Express.js and StackOverflow communities! I hope this question is not a duplicate, as I searched and found nothing similar. Currently, I am working on a project using Multer with Express to enable users to upload images, which will be saved a ...

javascriptnode.jsexpressmulter