根据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

我创建了一个表,其中我想要Name列中的所有值(隐藏)。我使用了下面的jquery代码,它使用nth-child(4)来获取所有值,但问题是这个表是来自另一个应用程序,所以如果表中插入了另一个列,那么下面的代码不会工作。我有一个列标题的id作为名称

Can anyone please tell me any solution for getting the column values based on the class or id.

任何人都可以告诉我任何基于类或ID获取列值的解决方案。

Als how can we check if the id is present or missing, if id is missing then apply the below logic

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>

2 个解决方案

#1

You can get the index of the #name element and then use it in the nth-child selector

您可以获取#name元素的索引,然后在第n个子选择器中使用它

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>

#2

You can use :last-child assuming that the new td is being added between the testX fields.

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

Alternatively, you can find the name header, get its index() and then find the td values from there:

或者,您可以找到名称标题,获取其索引(),然后从那里找到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>