Fatal编程技术网
  • javascript/
  • Javascript 使用分页时，如何将所有页面中的所有选定值附加到文本框中

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

javascript jquery html

Javascript 使用分页时，如何将所有页面中的所有选定值附加到文本框中,javascript,jquery,html,Javascript,Jquery,Html,我有一个index.html页面，可以选择多个客户端ip，我正在使用分页来显示多个客户端ip 请参阅此url中的index.html： 假设在第一页的这个url中，如果我选择2个客户端ip，那么这两个客户端ip将显示在客户端ip文本框中。然后，移动到第二页，如果我在那里选择一个客户端ip，我只能在客户端ip文本框中看到一个客户端ip，但不能看到3个客户端ip 但现在我正试图将所有页面的所有选定客户端ip显示到一个客户端ip文本框中 My index.html： <!DOCTYPE html

我有一个index.html页面，可以选择多个客户端ip，我正在使用分页来显示多个客户端ip

请参阅此url中的index.html：

假设在第一页的这个url中，如果我选择2个客户端ip，那么这两个客户端ip将显示在客户端ip文本框中。然后，移动到第二页，如果我在那里选择一个客户端ip，我只能在客户端ip文本框中看到一个客户端ip，但不能看到3个客户端ip

但现在我正试图将所有页面的所有选定客户端ip显示到一个客户端ip文本框中

My 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>


客户端Ip：
提交


$（文档）.ready（函数（）{
var TABLATE=函数（数据、列）{
var svg=d3.选择（'#ip'）。追加（“svg”）
var table=d3.选择（“#示例”）
var thead=table.append（'thead'）
var tbody=table.append（'tbody'）
thead.append（'tr'）
.selectAll（'th'）
.数据（列）
.输入（）
.append（'th'）
.文本（功能（d）{
返回d
})
var rows=tbody.selectAll（'tr'）
.数据（数据）
.输入（）
.append（'tr'）
变量单元格=行。选择全部（'td'）
.数据（功能（行）{
返回columns.map（函数（列）{
返回{
专栏：专栏，
值：行[列]
}
})
})
.输入（）
.append（'td'））
.文本（功能（d）{
返回d值
})
.append（“输入”）
.attr（“id”、“变更”）
.attr（“类型”、“复选框”）
.style（“浮动”、“左”）
。在“点击”时，函数（d，i）{
var csv=$（'：checkbox[id=change]：checked'）.map（函数（）{return$（this.parent（）.text（）；}）.get（）.join（'，'）；
$（'#ip'）.val（csv）；
});
返回表；
}
d3.csv（'http://localhost:3000/getcsv，函数（数据）{
var columns=['client_ip']
表格（数据、列）
$（'#示例'）。数据表({
“pagingType”：“完整编号”
});
});
美元（“#ip”）.val（“”）；
});
有人能帮我解决这个问题吗…

只需更改：

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

它将保存以前的值，还将设置当前的新值。另一种方法是将选定的IP推入阵列，如果未选中，则将其拼接

<!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>


客户端Ip：
提交


$（文档）.ready（函数（）{
var selectedIps=[]；
var TABLATE=函数（数据、列）{
var svg=d3.选择（'#ip'）。追加（“svg”）
var table=d3.选择（“#示例”）
var thead=table.append（'thead'）
var tbody=table.append（'tbody'）
thead.append（'tr'）
.selectAll（'th'）
.数据（列）
.输入（）
.append（'th'）
.文本（功能（d）{
返回d
})
var rows=tbody.selectAll（'tr'）
.数据（数据）
.输入（）
.append（'tr'）
变量单元格=行。选择全部（'td'）
.数据（功能（行）{
返回columns.map（函数（列）{
返回{
专栏：专栏，
值：行[列]
}
})
})
.输入（）
.append（'td'））
.文本（功能（d）{
返回d值
})
.append（“输入”）
.attr（“id”、“变更”）
.attr（“类型”、“复选框”）
.style（“浮动”、“左”）
.关于（“变更”，功能（d，i）{
如果（$（此）[0]。已选中）{
如果（选择d值小于0的P.indexOf）{
选择edips.push（d.value）；
}
}否则{
如果（选择dIPS.indexOf（d.value）>-1）{
选择eDips.splice（选择eDips.indexOf（d.value），1）；
}
}
$（'#ip'）.val（选择edips.join（'，'）；
});
返回表；
}
d3.csv（'getcsv'，函数（数据）{
var columns=['client_ip']
表格（数据、列）
$（'#示例'）。数据表({
“pagingType”：“完整编号”
});
});
美元（“#ip”）.val（“”）；
});

获取帮助应该从您尝试这样做开始，并显示您的困境。非常感谢。这对我很有用。您能解释一下这段代码吗。这对我很有帮助。在（“更改”，函数（d，i）{if（$（This）[0]。选中）{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（'，'）；})；每当复选框上发生更改事件时，上述函数将检查复选框是否已选中。如果选中，则其值将被推入数组
selectedIps
，如果未选中，则其值将从
seleetedips
数组中删除。最后，该值将打印到输入框中。我没有了解selectedIps。IndexOf（d.value）<0&selectedIps.indexOf（d.value）>-1。为什么我们要与-1比较它只是检查选中复选框值的索引。如果它已经存在于数组中，它将跳过它，否则它将推送它。
indexOf
函数返回
-1
如果值不存在，则返回
-1
。 
<!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>