Question

我的代码：

<!DOCTYPE html>
    <meta charset="utf-8">
    <html>
      <head>
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/Plugins/master/pagination/simple_numbers_no_ellipses.js"></script>

    <link rel='stylesheet' href='style.css'>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">

      </head>
      <body>

    <div>
    <form action="/home/divya/html_docs/click.html" method="post" id="form1">
    Client_ip :<input type="text" id ="ip" name="client_ip" style="width: 600px;"/>
    <div id="subDiv">
    <button type="submit" form="form1" value="Submit">Submit</button>
    </div>
    </div></br>

    <table id="example" class="display" cellspacing="0" width="100%">
    </table>

     <script>

      $(document).ready(function() {

    $("#ip").val('');

        $('#example').DataTable( {
            "pagingType": "full_numbers"
        } );
    } );


      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) { 

            var csv = $(':checkbox[id=change]:checked').map(function(){return this.value;}).get().join(',');

            $('#ip').val(csv);

    });

      return table;
    }


    d3.csv('http://localhost:3000/getcsv',function (data) {
        var columns = ['client_ip']
      tabulate(data,columns)
    });
      </script>
      </body>
    </html>

下面，

 .on("click", function(d,i) { 

                    var csv = $(':checkbox[id=change]:checked').map(function(){return this.value;}).get().join(',');

                    $('#ip').val(csv);

            });

在这部分中，我没有在csv变量中获得“client_ip”，而是将“on”作为csv变量。

当我们选中一个复选框时，如何在文本框中取代所有client_ip而不是“on”值。当我们取消选中复选框时，如何从文本框中删除取消的值。

任何人都可以帮我解决这个问题......

Answer 1

在map函数中，您返回复选框值，而不是返回单元格中的文本。

更改地图功能

var csv = $(':checkbox[id=change]:checked').map(function(){return this.value;})

到这个

var csv = $(':checkbox[id=change]:checked').map(function(){return $(this).parent().text();})

单击Checkbox，将选中的值放入文本框，然后从文本框中删除未选中的值

1 个答案: