2016-07-07 113 views
0

我想获取th的所有列值。例如在this Fiddle当我访问th时,我想获得该列中的所有td。从html数据中获取列数据

$(document).ready(function(){ 
$('.tableizer-table th').each(function(index,val){ 

     $('.tableizer-table tr td').eq(index).each(function (index,value) { 
     console.log(value); 
     }); 


    }); 
    }); 

上面的代码不起作用。

+1

如何以及当你想要的数据? – Thinker

+0

@Thinker当我访问th时,我想获得所有的值。例如,在上面的html中,当我访问'Item#\t'时,我想获得它下面的所有列值,即'Alloy(HR)Cast - HA(10 Cr Bal Fe)(CPO)\t Metal_Alloy'等。 –

回答

1

这让你每列的数据,但它会很高兴知道所需要的最终结果,@Thinker已经问:

$(document).ready(function(){ 
    $('.tableizer-table th').each(function(index,val){ 
    console.log(index); 
    $('.tableizer-table tr').each(function() { 
     console.log($($(this).find('td')[index]).text()) 
    }); 
    }); 
}); 
+0

谢谢!是的,我想要,但是你知道吗?如果没有td文本,我怎么能得到td?目前它的未来​​合金(HR)铸造 - HA(10铬钯铁)(CPO)。我只想在td中有文字。非常感谢! –

+0

已更新,以获取文本内容。 – daf

+0

非常感谢! –

0

所以你不想HTML,但只有文字?

使用$(this).text(),而不是在.each()

0

value你为什么不分配一个唯一的类名到细胞你想要然后抽取一个电话全班:

$('.mycolumnX') 

那么你可以只循环访问数组中的结果。

1

你可以根据这样的

列得到它的数据(注:当你点击一个个你会得到的数据)

$('.tableizer-table th').click(function() { 
 
    var getData = []; 
 
    for (var i = 0; i < $(".tableizer-table tbody tr").length; i++) { 
 
getData.push($(".tableizer-table tbody tr td").eq($(this).index()).text()); 
 
    } 
 
    alert(getData) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tableizer-table display cell-border" cellspacing="0" width="100%"> 
 
    <thead> 
 
    <th>Item#</th> 
 
    <th>Family</th> 
 
    <th>Grade</th> 
 
    <th>Characteristics</th> 
 
    <th>Full Description</th> 
 
    <th>Format</th> 
 
    <th>UOM</th> 
 
    <th> Price </th> 
 
    <th>Updated</th> 
 
    <th>Source</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HA (10 Cr Bal Fe) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $0.192 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HC (26 Cr, 4 Ni) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $0.556 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HD (26 Cr 6 Ni) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $0.647 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HE (26 Cr 10 Ni) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $0.848 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HF (20 Cr 10 Ni) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $0.789 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HH (25 Cr, 12 Ni) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $0.935 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HI (26 Cr, 5 Ni) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $1.090 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Alloy (HR) Cast - HK (25 Cr, 20 Ni) (CPO)</td> 
 
     <td>Metal_Alloy</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>Heat-Resistant Casting Alloys (Price based on item's commodity ingredients only. No processing)</td> 
 
     <td>Market Price of components</td> 
 
     <td>USD/LB</td> 
 
     <td> $1.323 </td> 
 
     <td>10/23/15</td> 
 
     <td>MetalPricing.com (CPO)</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

希望它帮助:)

+0

谢谢你的回答非常有帮助! –

1

我假设当你悬停或访问列标题,你想要一个将该列下的td元素写入控制台。

$(document).ready(function(){ 
    $('.tableizer-table th').on('hover', function(){ 
     var columnIndex = $(this).parent().index($(this)); 

     $('.tableizer-table tbody tr').each(function() { 
      console.log($(this).children('td').eq(columnIndex).text()); 
     }); 
    }); 
}); 
+0

谢谢你的回答非常有帮助! –