Получение значений столбца таблицы на основе идентификатора

Question

Я создал таблицу, в которой мне нужны все значения в столбцах Name (которые скрыты). Я использовал приведенный ниже код jquery, который использует nth-child(4) для получения всех значений, но проблема в том, что эта таблица поступает из другого приложения, поэтому скажите, добавляет ли таблица другой столбец между ними, тогда этот код не будет работать. У меня есть идентификатор заголовка столбца как name

Может кто-нибудь скажет мне какое-либо решение для получения значений столбцов на основе класса или идентификатора.

Als как мы можем проверить, если идентификатор присутствует или отсутствует, если идентификатор отсутствует, то применить ниже логику

$('#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, считая, что новый td добавляется между полями testX.

В качестве альтернативы, вы можете найти заголовок 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>