从特定列中获取所有值而不重复

Question

我需要使用 Jquery 从特定列（header "Comp"，在不同的位置）获取所有值而不重复。

我的桌子：

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

从特定列中获取所有值而不重复

Get all values from specific column without duplicates

each

jquery