如何在D3.js中将点击按钮动态添加到html表中

How to dynamically add click button to an html table in D3.js

本文关键字：动态 按钮 添加 表中 html D3 js      更新时间：2024-06-20

现在我有下面的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")。单击按钮时不会。我该如何解决此问题？

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

// 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); });

然而，如果您想使用当前的方法，您可以在<td>中使用D3附加一个<button>，这将允许您使用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 "";
    }
});
相关文章：