根據ID獲取表列的值

Question

我已經創建了一個表，其中需要“名稱”列（已隱藏）中的所有值。 我已經使用了下面的jQuery代碼，該代碼使用nth-child(4)獲取所有值，但是問題是該表來自另一個應用程序，所以說如果該表在之間插入了另一列，則下面的代碼不會工作。 我有一個列標題的ID作為name

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

Als我們如何檢查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

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

或者，您可以找到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>