如何使用内联 onclick 向数组添加多个值？答案

【问题标题】：How to add mutiple value to array with inline onclick?如何使用内联 onclick 向数组添加多个值？
【发布时间】：2019-03-25 00:17:29
【问题描述】：

假设我在下面有一个html表单，在我填写了“池，ip，端口”字段后，然后单击“添加”按钮，它将显示在宽文本区域中，并将ip：port对添加到字段数组中游泳池。

如果我继续填写不同的ip、端口对并点击“添加”，它将被添加到阵列池中。

如果我在 textarea 中选择一个 ip:port 对并单击删除，它将从数组池中删除。

我搜索了这个网站，这似乎可以通过带有某种 jquery 或 javascript 功能的 html onclick 事件来实现，但我对 html、jquery、javascript 等网络非常陌生，所以我希望有人可以在这里分享一些指导所以我可以开始走上正轨。下面的示例 html 表单（我什至不确定 html 表单是否完全正确:)）。

<!DOCTYPE html>
<html>
<body>

<form action="" id="ipport">
  pool: <input type="text" name="pool">
  IP: <input type="text" name="ip">
  Port: <input type="text" name="port">
  <button onclick="addIPPort()">Add</button>
  <br>
  <textarea rows="4" cols="50" name="comment" >
  IP1:Port1
  IP2:Port2
  </textarea>
  <button onclick="delIPPort()">Delete</button>
</form>


</body>
</html>

【问题讨论】：

jquery.com 是个不错的起点。
也许select 带有多个选项的元素更适合，查看演示w3schools.com/tags/att_select_multiple.asp
既然您是新手，您应该阅读 HTML、CSS 和 JavaScript。希望这不是太多。我从W3Schools开始。

标签： javascript jquery html arrays

【解决方案1】：

它甚至不是最漂亮的代码，但它应该给你一个很好的开始http://jsfiddle.net/7HfGm/1/我只给你添加，因为我不鼓励盲目使用代码，但它不会比我提供的内容有很大的飞跃。

首先，如果您使用 javascript，则不需要表单。

pool: <input type="text" name="pool">
IP:<input type="text" id="ip">
Port: <input type="text" id="port">
<button onclick="addIPPort()">Add</button>
<br>
<select id="select" multiple="multiple"></select>
<button onclick="delIPPort()">Delete</button>

我已经包含了代码中使用的 jQuery 函数的链接。

【讨论】：