d3 事件的 onclick 应将值存储在文本框中答案

【问题标题】：onclick of an d3 event should store the value in a textboxd3 事件的 onclick 应将值存储在文本框中
【发布时间】：2026-01-28 18:05:01
【问题描述】：

点击复选框后，我需要将所有选中的 client_ip 值放入 div ip 的 texbox 中。

我的代码：

 <html>
    <body>
    <div id="ipDiv">
    Client_ip :<input type="text" id ="ip" name="client_ip"/>
    </div>
    </body>
    <script>
    var tabulate = function (data,columns) {
    var svg = d3.select("#ip").append("svg");
      var table = d3.select('#example')
        var thead = table.append('thead')
        var tbody = table.append('tbody')

        thead.append('tr')
          .selectAll('th')
            .data(columns)
            .enter()
          .append('th')
            .text(function (d) { return d })

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

        var cells = rows.selectAll('td')
            .data(function(row) {
                return columns.map(function (column) {
                    return { column: column, value: row[column] }
              })
          })
          .enter()
        .append('td')
       .text(function (d) { return d.value })
       .append("input")
       .attr("id","change")
       .attr("type", "checkbox")
       .style("float","left")
    .on("click", function(d,i) { alert(d.value) });

      return table;
    }
    </script>
    </html>

复选框的单击应自动存储在 texbox 中。任何人都可以就这个问题提出建议..

提前致谢

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

您可以将值附加到现有文本框

    .on("click", function(d,i) { 
    alert(d.value);
    $('input#id').val(function( index, val ) {
        return val + d.value;
    })
  });

用于返回数组更改return val + d.value：

var arr = val.trim().length > 1 ? val.split(',') : []; //split textbox value in to array
arr.push(d.value); //add id to array
return arr.join(',');

如果您想在单击复选框时将文本框的值设置为复选框的逗号分隔值，最简单的方法是

.on("click", function(d,i) { 
        alert(d.value);
        var csv = $(':checkbox[id=change]:checked').map(function(){return this.value;}).get().join(',');
        $('input#id').val(csv);

});

【讨论】：

代替"input#id"，我需要保持这样吗，.on("click", function(d,i) { alert(d.value); $('# ip').val(function(index, val) { return val + d.value; });
你得到了 div 和输入 id 作为 ip。使用 input#id 会将选择器限制为文本框
k，现在工作正常。现在我在文本框中获取所有值。但我想用逗号分隔所有值。那我们该怎么做呢？
我确实喜欢这个 return val +','+ d.value;但它也包括第一个值的逗号。例如：,192.168.7.1,192.168.7.100
非常感谢您的建议。它真的很有帮助。