基於id獲取表列的值

Question

我創建了一個表，其中我想要Name列中的所有值（隱藏）。我使用下面的jQuery代碼，它使用nth-child(4)獲取所有的值，但問題是這個表來自另一個應用程序，所以說如果表插入另一列之間，然後下面的代碼將無法正常工作。我有一個列標題爲name

任何人都可以請告訴我任何解決方案獲取基於類或ID的列值。

阿爾斯我們如何檢查ID存在或缺失，如果ID丟失然後應用下面的邏輯

$('#content table tbody tr td:nth-child(4)').each(function() { 
 
    console.log('seee:', $(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div id="content"> 
 
    <table border="1"> 
 
    <thead> 
 
     <tr> 
 
     <th>Test1</th> 
 
     <th>Test2</th> 
 
     <th>Test3</th> 
 
     <th id="name" style="display:none">Name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>23</td> 
 
     <td>54</td> 
 
     <td>76</td> 
 
     <td style="display:none">jacob</td> 
 
     </tr> 
 
     <tr> 
 
     <td>34</td> 
 
     <td>54</td> 
 
     <td>32</td> 
 
     <td style="display:none">jacob</td> 
 
     </tr> 
 
     <tr> 
 
     <td>65</td> 
 
     <td>78</td> 
 
     <td>56</td> 
 
     <td style="display:none">lessi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>34</td> 
 
     <td>65</td> 
 
     <td>34</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>32</td> 
 
     <td>65</td> 
 
     <td>76</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>54</td> 
 
     <td>65</td> 
 
     <td>34</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>56</td> 
 
     <td>76</td> 
 
     <td>87</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>65</td> 
 
     <td>67</td> 
 
     <td>65</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>76</td> 
 
     <td>67</td> 
 
     <td>56</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>76</td> 
 
     <td>65</td> 
 
     <td>54</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

你可以得到#name元素的索引，然後使用它在nth-child選擇

var ids = $('#name').index(); 
 
$('#content table tbody tr td:nth-child(' + (ids + 1) + ')').each(function() { 
 
    console.log('seee:', $(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <table border="1"> 
 
    <thead> 
 
     <tr> 
 
     <th>Test1</th> 
 
     <th>Test2</th> 
 
     <th>Test3</th> 
 
     <th id="name" style="display:none">Name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>23</td> 
 
     <td>54</td> 
 
     <td>76</td> 
 
     <td style="display:none">jacob</td> 
 
     </tr> 
 
     <tr> 
 
     <td>34</td> 
 
     <td>54</td> 
 
     <td>32</td> 
 
     <td style="display:none">jacob</td> 
 
     </tr> 
 
     <tr> 
 
     <td>65</td> 
 
     <td>78</td> 
 
     <td>56</td> 
 
     <td style="display:none">lessi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>34</td> 
 
     <td>65</td> 
 
     <td>34</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>32</td> 
 
     <td>65</td> 
 
     <td>76</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>54</td> 
 
     <td>65</td> 
 
     <td>34</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>56</td> 
 
     <td>76</td> 
 
     <td>87</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>65</td> 
 
     <td>67</td> 
 
     <td>65</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>76</td> 
 
     <td>67</td> 
 
     <td>56</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>76</td> 
 
     <td>65</td> 
 
     <td>54</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

假設在testX字段之間添加了新的td，則可以使用:last-child。

或者，你可以找到name頭，從那裏得到它index()，然後找到td值：

var nameTdIndex = $('#name').index() + 1; 
 
$('#content td:nth-child(' + nameTdIndex + ')').each(function() { 
 
    console.log('seee:', $(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div id="content"> 
 
    <table border="1"> 
 
    <thead> 
 
     <tr> 
 
     <th>Test1</th> 
 
     <th>Test2</th> 
 
     <th>Test3</th> 
 
     <th id="name" style="display:none">Name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>23</td> 
 
     <td>54</td> 
 
     <td>76</td> 
 
     <td style="display:none">jacob</td> 
 
     </tr> 
 
     <tr> 
 
     <td>34</td> 
 
     <td>54</td> 
 
     <td>32</td> 
 
     <td style="display:none">jacob</td> 
 
     </tr> 
 
     <tr> 
 
     <td>65</td> 
 
     <td>78</td> 
 
     <td>56</td> 
 
     <td style="display:none">lessi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>34</td> 
 
     <td>65</td> 
 
     <td>34</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>32</td> 
 
     <td>65</td> 
 
     <td>76</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>54</td> 
 
     <td>65</td> 
 
     <td>34</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>56</td> 
 
     <td>76</td> 
 
     <td>87</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>65</td> 
 
     <td>67</td> 
 
     <td>65</td> 
 
     <td style="display:none">firoz</td> 
 
     </tr> 
 
     <tr> 
 
     <td>76</td> 
 
     <td>67</td> 
 
     <td>56</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
     <tr> 
 
     <td>76</td> 
 
     <td>65</td> 
 
     <td>54</td> 
 
     <td style="display:none">messi</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>