CODEWITHSUNDEEP
jquery
Neerav Poriya
Neerav Poriya

Reputation: 23

Find tr tag with particular style using jquery

So i was working on this table using jquery.Html for the table with single tr is as below I want to first fetch the tr tag which is having style sheet and once that is done i want to get value of particular td in it which i am able to do if there is one tr in a table like in the below html

    <table id="tblTowerSubTowerLot" class="table table-bordered table-striped mt-5">
    <thead class="thead-light">
        <tr>
            <th>Tower Name</th>
            <th>Sub Tower Name</th>
            <th>Lot Name</th>
            <th>Derived Resource</th>
            <th style="width: 75px;">Status</th>
        </tr>
    </thead>
    <tbody><tr id="trTSL0" class="pricingRow" onclick="SetLotwiseDataControls(0);" style="background-color: rgba(217, 244, 252, 1);"><td style="display:none;"><label id="lblClientFTEDetailsId0">8893</label><label id="lblDealId0">6804</label><label id="lblTowerId0">1</label><label id="lblSubTowerId0">1</label><label id="lblLotId0">1</label></td><td><label id="lblTowerName0" class="pricingRow m-0">T1</label></td><td><label id="lblSubTowerName0" class="pricingRow m-0">ST1</label></td><td><label id="lblLotName0" class="pricingRow m-0">1</label></td><td><label id="lblDerivedFTE0" class="pricingRow m-0">1.04</label></td><td><img id="imgStaffIndicator0" src="../Content/Custom/images/Staffing_tick.png" data-toggle="tooltip" title="Staffing Completed" style="width: 22px;"><img id="imgPriceIndicator0" src="../Content/Custom/images/Pricing_untick.png" data-toggle="tooltip" title="Pricing Pending" style="width: 22px;"></td></tr></tbody>
</table>

For this i am able to fetch the value of particular td tag by 

if( $('#tblTowerSubTowerLotPricing tbody tr').attr('style') ) 
  {

    $("td label:eq(3)").html();

  } 
else 
  {

    console.log('It did not equal block');

  }

image for the same is For single td

but now when there are multiple tr in the table and if 3rd or 4th tr is selected like in the image below Multiple tr with one of it consisting of style sheet

and i try to use the code 

if( $('#tblTowerSubTowerLotPricing tbody tr').attr('style') ) 
  {

    $("td label:eq(3)").html();

  } 
else 
  {

    console.log('It did not equal block');

  }

Then it goes in the else part and i am not able to fetch the data.

How can i fetch the data when there are multiple tr tags and only one of them has style applied to it.

Upvotes: 1

Views: 2397

Answers (2)

Udhay Titus
Udhay Titus

Reputation: 5869

you can use style attr it will works check this example

if( $('#tblTowerSubTowerLotPricing').attr('style') == 'background-color:rgba(217,244,252,1);')

if( $('#tblTowerSubTowerLotPricing').attr('style') == 'background-color:rgba(217,244,252,1);') {
      alert('It equal block');
     
} else {
      alert('It did not equal block');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tblTowerSubTowerLotPricing" style="background-color:rgba(217,244,252,1);">Test</div>

Upvotes: 1

natsuozawa
natsuozawa

Reputation: 660

In the second case, your selector matches multiple elements, so you should parse each of them using the .each jQuery method.

When doing so, you want to select the td that is a child of the element, so you use the .find jQuery method. 

$('#tblTowerSubTowerLotPricing tbody tr').each(function(index, element) {
  if ($(element).attr('style') {
    console.log($(element).find("td label:eq(3)").html());
  } else {
    console.log('It did not equal block');
  }
});

The documentation for these methods may help you further.

https://api.jquery.com/each/

https://api.jquery.com/find/

Upvotes: 2

Related Questions