2016-07-07 158 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

謝謝你的回答非常有幫助! –