Retrieve a collection of rows from a table by referencing a specific cell value

Question

Retrieve a collection of rows from a table by referencing a specific cell value

Is there a way to retrieve a list of rows from a table where one cell has a value of 0.00 without using a loop in jQuery?

Preferably, with code that does not involve looping (avoiding the use of the each statement).

<table id="products">
<tr><td>Name</td><td>Product</td><td>Price</td></tr>
<tr id="1"><td>gdfgdf</td><td>1</td><td aria-describedby="Price">0.00</td></tr>
<tr id="2"><td>gdf455g</td><td>2</td><td aria-describedby="Price">0.00</td></tr>
<tr id="3"><td>gdf43gdf</td><td>1</td><td aria-describedby="Price">6.50</td></tr>
<tr id="4"><td>gdf44g</td><td>2</td><td aria-describedby="Price">7.00</td></tr>
</table>

I am looking to extract the first two rows from the table where the price is 0.00.

jquery css html-table

Answer 1

Answer №1

Alright, here's the solution for you:

$("#products td").filter(function () {
                        return $(this).text() == 0;
                   }).closest("tr").hide();

Using this code will hide the rows where at least one cell is equal to 0.

Cheers and happy coding!

Answer 2

Alright, here's the solution for you:

$("#products td").filter(function () {
                        return $(this).text() == 0;
                   }).closest("tr").hide();

Using this code will hide the rows where at least one cell is equal to 0.

Cheers and happy coding!

Answer 3

Answer №2

Here's a method that achieves the desired outcome without visibly using a loop function like each. However, it still involves looping through all the rows in the background to check for the specified text.

$('#products tr').filter(function(){
    return $(this).find('td:last').text() == '0.00';
}).doSomething();

Check out the DEMO here

Answer 4

Here's a method that achieves the desired outcome without visibly using a loop function like each. However, it still involves looping through all the rows in the background to check for the specified text.

$('#products tr').filter(function(){
    return $(this).find('td:last').text() == '0.00';
}).doSomething();

Check out the DEMO here

Answer 5

Answer №3

Using .each method for highlighting cells with value of 0


$('td').each(function() {
    if ($(this).text() == 0) {
        $(this).css("background", "yellow");
    }
});

Updated version using :contains to highlight first two rows instead of just cells


var elements = $('td:contains(0)');
for (i=0; i<element.length; i++) {
    if (element[i].innerHTML == 0)
        $(element[i]).parent().css("background", "yellow");
}

Answer 6

Using .each method for highlighting cells with value of 0


$('td').each(function() {
    if ($(this).text() == 0) {
        $(this).css("background", "yellow");
    }
});

Updated version using :contains to highlight first two rows instead of just cells


var elements = $('td:contains(0)');
for (i=0; i<element.length; i++) {
    if (element[i].innerHTML == 0)
        $(element[i]).parent().css("background", "yellow");
}

Retrieve a collection of rows from a table by referencing a specific cell value

Answer №1

Answer №2

Answer №3

Similar questions

Ways to change the background color of a Bootstrap row excluding column padding

Viewing the JSON value within a select tag using Zend Framework 2

How to stylishly showcase a list in a horizontal row using HTML and CSS`

Decrease the padding value inherited from CSS while reducing the numerical value

Fetching the duplicated data from a submitted form using serialize() method

The design breaks occur exclusively in the Android default browser

connecting the content management system page to a specific image

Design a table within an angularjs directive that incorporates a unique rowspan feature

Observing the HTMLInputElement Object in Action with JavaScript

The constant frustration of trying to extract a predefined AJAX return value, only to

Ways to adjust the dimensions of a textarea based on character count

Guide to sending an ajax request from one page and receiving the response on a different page

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?

Using JavaScript to dynamically load Cascading Style Sheets based on the current

The selection discrepancy is due to the misalignment between the cursor and white space in the CSS styling

Modifying the class of multiple images within an array

Using jQuery and AJAX to dynamically pass a variable into the URL parameter in dynamic HTML pages

ES6 import of CSS file results in string output instead of object

Use setTimeout and setInterval with the initial input without parentheses or double quotation marks

Can you explain the alternative prev function within ReactJs?