jquery - 获取特定列中的所有值，不重复

Question

我需要使用 Jquery 获取特定列(标题“Comp”，在不同位置)中的所有值，且不重复。

我的 table :

<table>
  <thead class="tableh">
    <tr> <th>Key</th><th>Comp</th> </tr>
  </thead>
  <tbody>

 <tr><td>CA5533</td><td>1413</td></tr>

  </tbody>
</table>

<table>
  <thead class="tableh">
    <tr> <th>Key</th><th>Sec</th><th>Comp</th> </tr>
  </thead>
  <tbody>

 <tr><td>CA5533</td><td>1413</td><td>1413</td></tr>

  </tbody>
</table>

我的功能(不起作用):

var arr = [];
$(".tableh th:contains('Comp')").each(function() {
    if ($.inArray($(".tableh th:contains('Comp') td").text(), arr) == -1)
        arr.push($(".tableh th:contains('Comp') td").text());
});

//Create your select
var select = $("<select />");
for (var i = 0; i < arr.length; i++) {
    $("<option>" + arr[i] + "</option>").appendTo(select);
}

select.appendTo("#whitebginternal");

这里有人可以帮助我吗？

谢谢!

Answer 1

要实现此目的，您可以首先从第 th 中的值找到 Comp 行的索引。然后，您可以构建该列中 td 元素中所有文本值的数组，然后循环遍历该数组以将 option 元素放入 select。

另请注意，正如您所说，页面中有多个表格，您需要循环遍历每个表格，如下所示:

$('table:has(thead.tableh)').each(function() {
  var index = $(this).find('.tableh th:contains("Comp")').index();
  var options = $(this).find('tbody tr').find('td:eq(' + index + ')').map(function() {
    return `<option>${$(this).text()}</option>`;
  }).get().join('');

  $("#whitebginternal").append(`<select>${options}</select>`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead class="tableh">
    <tr>
      <th>Key</th>
      <th>Comp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>CA5533</td>
      <td>1413</td>
    </tr>
    <tr>
      <td>CA5534</td>
      <td>1414</td>
    </tr>
    <tr>
      <td>CA5535</td>
      <td>1415</td>
    </tr>
    <tr>
      <td>CA5536</td>
      <td>1416</td>
    </tr>
  </tbody>
</table>

<div id="whitebginternal"></div>