javascript - 根据数据选择元素

Question

我需要根据数据内容选择特定元素。

假设我有一个包含两个单元格的表格，红色和蓝色。我有一堆 ["Red", "Blue", "Blue", ... ]

形式的数据

我的问题是如何根据匹配数据的数量修改适当的单元格。例如，如果有 5 个蓝色和 3 个红色，则蓝色单元格的背景为 #00f(不透明度为 50%)，红色单元格的背景为 #f00(不透明度为 30%)。

到目前为止，我只看到了修改集合中所有元素的功能(例如 selectAll("p"))，甚至通过过滤修改一个小节。

有没有办法根据数据选择特定元素？

Answer 1

如果可能的话，我会使用 d3 来构建表:http://jsfiddle.net/ztGE9/2/

var data = [["Red","Blue","Blue"], ["Red"], ["Blue"], ["Red", "Blue"], ["Red", "Blue", "Red"], ["Red","Red","Red","Red","Blue"]];

var table = d3.select("#container").append("table"),
    tbody = table.append("tbody");

var rows = tbody.selectAll("tr")
                .data(data)
                .enter().append("tr");

var cells = rows.selectAll("td")
    .data(function (row) {
        var tally = {Red:0,Blue:0};
        row.forEach(function(item) {
            tally[item]++;
        });
        return ["rgba(255,0,0,"+ tally["Red"]*0.1 +")",
                "rgba(0,0,255,"+ tally["Blue"]*0.1 +")"];
    })
    .enter()
    .append("td")
    .text("foo")
    .style("background-color", function(d) {
        console.log(d);
        return d;
    });

如果您的 HTML 中已经编码了表格，您可以获取每个 td 的文本并使用正则表达式来统计事物 - 无需根据数据本身来选择事物。参见这里:http://jsfiddle.net/aKtct/ .

var tds = document.getElementsByTagName("td"),
    forEach = Array.prototype.forEach;

forEach.call(tds, function (td) {
    var redMatch = td.textContent.match(/Red/g),
        redCt = redMatch && redMatch.length || 0,
        blueMatch = td.textContent.match(/Blue/g),
        blueCt = blueMatch && blueMatch.length || 0;
    var rgba = redCt ? "rgba(255,0,0," + 0.1 * redCt + ");" :
                       "rgba(0,0,255," + 0.1 * blueCt + ");";
    td.style.cssText += "background-color:" + rgba;
})

如果您确实想要根据数据选择元素，请使用 custom data attributes以及像 $("#td[data-something='RedRedRedBlue']") 这样的属性选择器。