Question

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

假设我有一个包含两个单元格的表格，Red＆amp;蓝色。我有一堆["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']")等属性选择器。

基于数据选择元素

1 个答案: