使用jquery获取特定th列的td元素值

Question

我是以下的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>

写了下面的jquery，它不起作用。

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

我预计b10可以按顺序包含以下值。

• 1
• skuType =＆＃34; ASAF_FABRIC＆＃34; AND NOT basicColor IS NULL ORDER BY dynamicAttributes.fabricpriceband，basicColor，dynamicAttributes.fabrictype，dynamicAttributes.asafpattern，dynamicAttributes.asaffabricbrand
• 假

上面的代码没有返回任何内容。我是一个jquery新手，如果有人可以帮我解决问题，那将会很棒。

非常感谢提前。

Answer 1

假设您需要的列可能并不总是第三列，您可以使用：

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())
})

＆＃13;

＆＃13;

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())
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请注意，您的问题中的代码示例中存在一个小错字。在第一个正文行之后你有一个额外的<tr>。

Answer 2

要打印属于第三列的所有单元格，您可以选择以下单元格：

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;