Alex Man
Alex Man

Reputation: 4886

getting values of table column based on id

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

Answers (2)

Rory McCrossan
Rory McCrossan

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

Arun P Johny
Arun P Johny

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

Related Questions