在JavaScript / jQuery中从列中获取所有值而不重复
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在JavaScript / jQuery中从列中获取所有值而不重复相关的知识,希望对你有一定的参考价值。
我想创建一个选择下拉列表,其中包含列中的所有值,每个值只出现一次。
有没有办法在javascript或jQuery中实现这一点,假设我有一个基本的html表格,并且有问题的列是columnA?
答案
您需要进行一些检查,以确保您尚未包含列,例如:
function makeSelectFromColumn() {
var arr = [];
$("td:first").each(function() {
if ($.inArray($(this).text(), arr) == -1)
arr.push($(this).text());
});
//Create your select
var select = $("<select />");
for (var i = 0; i < arr.length; i++) {
$("<option>" + arr[i] + "</option>").appendTo(select);
}
select.appendTo("body"); //append where you need
}
另一答案
使用普通的js(没有库):live demo here (click).
var colA = document.querySelectorAll('td:first-child'); //select the column you want
var used = []; //to check for used values
var frag = document.createDocumentFragment(); //add option elements to this
for (var i=0; i<colA.length; ++i) { //for each item in the column
var text = colA[i].textContent; //get the text from the item
if (used.indexOf(text) == -1) { //if the text isn't already used
used.push(text); //store the text as used
var option = document.createElement('option'); //create option
option.textContent = text;
frag.appendChild(option); //add option to frag
}
}
var select = document.createElement('select'); //create select
select.appendChild(frag); //add options to select
document.body.appendChild(select); //put the select somewhere on the page
HTML:
<table>
<tbody>
<tr><td>Col A Val1</td></tr>
<tr><td>Col A Val2</td></tr>
<tr><td>Col A Val3</td></tr>
<tr><td>Col A Val1</td></tr>
<tr><td>Col A Val2</td></tr>
<tr><td>Col A Val3</td></tr>
</tbody>
</table>
另一答案
function getNthColumn(n) {
var data = [],
i,
yourSelect,
unique;
$("#yourTable tr td:nth-child("+n+")").each(function () {
data.push($(this).text());
});
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
// Use this function if your table is not large as the time complexity is O(n^2)
unique = data.filter(function(item, i, arr) {
return i == arr.indexOf(item);
});
yourSelect = $('#yourSelect');
for (i = 0; i < unique.length; i += 1) {
yourSelect.append("<option>"+unique[i]+"</option>");
}
}
以上是关于在JavaScript / jQuery中从列中获取所有值而不重复的主要内容,如果未能解决你的问题,请参考以下文章