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