根据 id 获取 table 列的值

Question

我创建了一个 table，其中我想要名称列（隐藏）中的所有值。我使用了下面的 jquery 代码，它使用 nth-child(4) 来获取所有值，但问题是这个 table 来自另一个应用程序，所以如果 table在两者之间插入另一列然后下面的代码将不起作用。我有一个列 header 作为 name

谁能告诉我根据 class 或 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

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

或者，您可以找到 name header，获取其 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>

根据 id 获取 table 列的值

getting values of table column based on id

javascript

jquery

html-table