Reputation: 4886
I have created a table in which I want all the values within the Name columns(which is hidden). I have used the below jquery code which uses nth-child(4)
for getting all the values, but the issue is that this table is coming from another application, so say if the table is inserting another column in between then the below code wont work. I am having an id for the column header as name
Can anyone please tell me any solution for getting the column values based on the class or id.
Als how can we check if the id is present or missing, if id is missing then apply the below logic
$('#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>
Upvotes: 1
Views: 2178
Reputation: 337637
You can use :last-child
assuming that the new td
is being added between the testX
fields.
Alternatively, you can find the name
header, get its index()
and then find the td
values from there:
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>
Upvotes: 1
Reputation: 388406
You can get the index of the #name
element and then use it in the nth-child
selector
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>
Upvotes: 1