Question

我有一个index.html页面，可以选择多个client_ip并使用分页来显示多个client_ip。

请参阅此网址中的index.html：http://plnkr.co/edit/y7qAUOwVfvKqQBjYW3JF?p=preview

假设在第1页的这个网址中，如果我选择了2个clent_ip，那么这两个client_ip会显示在client_ip文本框中。然后，如果我在那边选择一个client_ip，请转到第2页，我在client_ip文本框中只能看到一个client_ip但不能看到3个client_ip。

但现在我尝试将所有选定的client_ip所有页面显示在client_ip文本框中。

我的index.html：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8" ></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div>
    <form action="/some" method="get">
      Client Ip :
      <input type="text" id="ip" name="client_ip" style="width: 600px;" />
      <div id="subDiv">
        <button type="submit" value="Submit">Submit</button>
      </div>
    </form>
  </div>
  <br/>

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

  <script>


    $(document).ready(function() {
      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).parent().text();}).get().join(',');

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

});


        return table;
      }

      d3.csv('http://localhost:3000/getcsv', function(data) {
        var columns = ['client_ip']
        tabulate(data, columns)

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

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

    });
  </script>
</body>

</html>

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

Answer 1

另一种方法是将选定的Ips推入数组并在未选中时将其拼接。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div>
    <form action="/some" method="get">
      Client Ip :
      <input type="text" id="ip" name="client_ip" style="width: 600px;" />
      <div id="subDiv">
        <button type="submit" value="Submit">Submit</button>
      </div>
    </form>
  </div>
  <br/>

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

  <script>
    $(document).ready(function() {
      var selectedIps = [];
      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("change", function(d, i) {
            if ($(this)[0].checked) {
              if (selectedIps.indexOf(d.value) < 0) {
                selectedIps.push(d.value);
              }
            } else {
              if (selectedIps.indexOf(d.value) > -1) {
                selectedIps.splice(selectedIps.indexOf(d.value), 1);
              }
            }
            $('#ip').val(selectedIps.join(','));
          });


        return table;
      }

      d3.csv('getcsv', function(data) {
        var columns = ['client_ip']
        tabulate(data, columns)

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

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

    });
  </script>
</body>

</html>

Plunker

Answer 2

只需改变：

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

致：

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

它将保存以前的值，并且还将设置当前的新值

当我们使用分页时，如何将所有页面中的所有选定值附加到文本框中

2 个答案: