Question

现在我有以下更新表格的D3代码。第一列由数据中的字符串填充，第二列应该是一个按钮，单击该按钮会将字符串打印到控制台。相关的非工作代码如下：

function update_table(old_table, data, which_div) {
    var columns = ["value", "button"];
    table.select("tbody").remove();
    var tbody = table.append("tbody");
    var rows = tbody.selectAll("tr").data(data).enter().append("tr");
    var cells = rows.selectAll("td")
        .data(function (d) {
           return columns.map(function (column) {
              return { column: column, text: d};
        });
    }).enter()
    .append("td")
    .html(function (d) {  
        if (d.column === columns[0]) return d.text;
        else if (d.column === columns[1]) {
            return "<button onclick="+clickaction(d)+">"+"Click me!</button>";
        }
    });
return table ;
}

function clickaction(d) {
    console.log("hi");
}

每个表格中的按钮显示在屏幕上，但问题是每次表格更新时，都会调用console.log("hi")。不是单击按钮时。我该如何解决？

Answer 1

更优雅的方法是附加文本<td>，然后附加按钮<td>。然后，您可以直接在第二列中附加按钮。

// Append the first column, using the data already stored in the rows
rows.append("td").html(function(d){ return d; });

// Append the second column, which has no text but contains a button
// with an onclick function
var buttonColumn = rows.append("td");
buttonColumn.append("button")
    .text("Click me!")
    .on("click", function(d){ return clickaction(d); });

如果您想使用当前的方法，可以在<button>中使用D3附加<td>，这样您就可以使用button.on("click", function(){ ... })：

.html(function (d) {  
    if (d.column === columns[0]) return d.text;
    else if (d.column === columns[1]) {
        // Append a button as a side-effect
        var button = d3.select(this).append("button")
            .text("Click me!")
            .on("click", function(){ clickaction(d); })
        // Return nothing
        return "";
    }
});

如何动态地将单击按钮添加到D3.js中的html表

1 个答案: