getting td element values of a particular th column using jquery

Question

I've the below html.

<table border="1" class="myTable">
               <tr>
                  <th class="cname">Component</th>
                  <th class="pname">Properties</th>
                  <th class="sname">lqwasb10</th>
                  <th class="sname">lqwasb11</th>
               </tr>
                     <tr>
                     <td class="cname">InventoryManager</td>
                     <td class="pname">maxConcurrentUpdateRetries</td>
                        <td class="pvalue">1</td>
                        <td class="pvalue">1</td>
                     </tr>
                     <tr>
                     <td class="cname">CatalogTools</td>
                     <td class="pname">queryASAFFabrics</td>
                        <td class="pvalue">skuType="ASAF_FABRIC" AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband, basicColor, dynamicAttributes.fabrictype, dynamicAttributes.asafpattern, dynamicAttributes.asaffabricbrand</td>
                        <td class="pvalue">skuType="ASAF_FABRIC" AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband, basicColor, dynamicAttributes.fabrictype, dynamicAttributes.asafpattern, dynamicAttributes.asaffabricbrand</td>
                     </tr>
                     <tr>
                     <td class="cname">CatalogTools</td>
                     <td class="pname">loggingDebug</td>
                        <td class="pvalue">false</td>
                        <td class="pvalue">false</td>
                     </tr>
</table>

Have written the below jquery and it is not working.

 $(document).ready(function(){
           $('.myTable th').each(function(){
              var server = $(this).html();
              if(server === 'lqwasb10'){
                 var b10 = $('.myTable tr td pvalue').text();
                 alert(b10);
              }
           });
       });

I expected the b10 could contain the below values in order.

1
skuType="ASAF_FABRIC" AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband, basicColor, dynamicAttributes.fabrictype, dynamicAttributes.asafpattern, dynamicAttributes.asaffabricbrand
false

The above code doesn't return anything. I'm a jquery newbie, it would be great if someone can help me with a solution.

Many Thanks in advance.

$('.myTable tr td propval') isn't a valid selector. What's propval? — j08691
– j08691, Commented Sep 11, 2016 at 20:07
@j08691, have edited now. I'm sorry it was a typo. But the code didn't work. Any suggestions? — harshavmb
– harshavmb, Commented Sep 11, 2016 at 20:45
You probably meant $('.myTable tr td.pvalue'). In $('.myTable tr td pvalue'), jQuery searches for an element named pvalue when it's really a class applied to a <td> element — j08691
– j08691, Commented Sep 11, 2016 at 20:47
yes. This I already tried but it is fetching all td values. I just want td values under lqwasb10 column. Any more suggestions please. — harshavmb
– harshavmb, Commented Sep 11, 2016 at 20:51

j08691 · Accepted Answer · 2016-09-11 20:59:39Z

Assuming that the column you need might not always be the third column, you can use:

var idx;

// Find index of cell with 'lqwasb10'
$('.myTable th').each(function(index) {
  if ($(this).text() === 'lqwasb10') idx = index;
})

// Loop through each cell with the same index
$('.myTable tr').each(function() {
  console.log($(this).find('td:eq('+idx+')').text())
})

var idx;

// Find index of cell with 'lqwasb10'
$('.myTable th').each(function(index) {
  if ($(this).text() === 'lqwasb10') idx = index;
})

// Loop through each cell with the same index
$('.myTable tr').each(function() {
  console.log($(this).find('td:eq('+idx+')').text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="myTable">
  <tr>
    <th class="cname">Component</th>
    <th class="pname">Properties</th>
    <th class="sname">lqwasb10</th>
    <th class="sname">lqwasb11</th>
  </tr>
  <tr>
    <td class="cname">InventoryManager</td>
    <td class="pname">maxConcurrentUpdateRetries</td>
    <td class="pvalue">1</td>
    <td class="pvalue">1</td>
  </tr>
  <tr>
    <td class="cname">CatalogTools</td>
    <td class="pname">queryASAFFabrics</td>
    <td class="pvalue">skuType="ASAF_FABRIC" AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband, basicColor, dynamicAttributes.fabrictype, dynamicAttributes.asafpattern, dynamicAttributes.asaffabricbrand</td>
    <td class="pvalue">skuType="ASAF_FABRIC" AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband, basicColor, dynamicAttributes.fabrictype, dynamicAttributes.asafpattern, dynamicAttributes.asaffabricbrand</td>
  </tr>
  <tr>
    <td class="cname">CatalogTools</td>
    <td class="pname">loggingDebug</td>
    <td class="pvalue">false</td>
    <td class="pvalue">false</td>
  </tr>
</table>

Note that there's a small typo in your code example in your question. You have an extra <tr> after the first body row.

perfect! This is what exactly I'm looking for. Many thanks for your patience...:)

gaetanoM · Accepted Answer · 2016-09-11 20:14:00Z

2

In order to print all cells belonging to the third column you can select these cells:

$('.myTable tr:gt(0) td:nth-child(3)')

$('.myTable tr:gt(0) td:nth-child(3)').each(function(){
  var b10 = $(this).text();
  console.log(b10);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table border="1" class="myTable">
    <tr>
        <th class="cname">Component</th>
        <th class="pname">Properties</th>
        <th class="sname">lqwasb10</th>
        <th class="sname">lqwasb11</th>
    </tr>
    <tr>
        <td class="cname">InventoryManager</td>
        <td class="pname">maxConcurrentUpdateRetries</td>
        <td class="pvalue">1</td>
        <td class="pvalue">1</td>
    </tr>
    <tr>
    <tr>
        <td class="cname">CatalogTools</td>
        <td class="pname">queryASAFFabrics</td>
        <td class="pvalue">skuType="ASAF_FABRIC" AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband, basicColor, dynamicAttributes.fabrictype, dynamicAttributes.asafpattern, dynamicAttributes.asaffabricbrand</td>
        <td class="pvalue">skuType="ASAF_FABRIC" AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband, basicColor, dynamicAttributes.fabrictype, dynamicAttributes.asafpattern, dynamicAttributes.asaffabricbrand</td>
    </tr>
    <tr>
        <td class="cname">CatalogTools</td>
        <td class="pname">loggingDebug</td>
        <td class="pvalue">false</td>
        <td class="pvalue">false</td>
    </tr>
</table>

answered Sep 11, 2016 at 20:14

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

harshavmb Over a year ago

Thanks @gaetanoM, Could you please tell me how to iterate through th rows and get the td values. I've servername to check th server and I just have to print the td values under lqwasb10. I want to dynamically print the td values.. Thanks

Collectives™ on Stack Overflow

getting td element values of a particular th column using jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related