如何从html列表中动态添加/删除人员？

时间：2018-10-01 22:04:17

标签： javascript java html list

此问题已在此论坛上多次提出。但是，每次我应用代码并编辑字段以适应我的代码时，它似乎都不起作用。本质上，我正在尝试从表单中开发列表，因此一旦填写了字段并单击添加按钮。提供的信息将填充在表格下方的有序列表中。这是到目前为止我得到的以下html和javascript代码。当我单击“添加”按钮时，键入的信息会显示在原始域名后的网址栏中，但从未列出任何列表。

var list = document.getElementById('list');

function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);

return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<form id="lineInfo" onsubmit="return add()">
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
</form>
<ol id="list"></ol>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

好吧，您的代码在作为SO代码段运行时有效（请参见下文），因此我们需要有关您所遇到问题的更多信息，然后才能回答您的问题。

那是说，我确实注意到您的新列表项被添加了两次，这是因为您运行了add()函数两次：一次是按钮按下时的onclick处理程序，一次是作为提交表格。因此，我们需要删除其中之一...我敢打赌，您最终将想要保留该表单，但是下面的工作代码将删除该表单（保持按钮的onclick），因为我敢打赌，您的问题是，尽管您的代码有效，但是您正在使用表单刷新页面，清除了已添加到列表中的选项。如果您觉得这不错，那么可以考虑通过GET参数传递/获取新列表项。

var list = document.getElementById('list');

function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);

return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>

<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>

<ol id="list"></ol>
</body>
</html>

答案 1 :(得分：0)

这可能有助于假设每个字段都有一个ID：

document.querySelector('#yourButton').addEventListener('click', function(e){
    /* Stop the form from submiting if useful */
    e.preventDefault();
    /* get the values of fields one at a time */
    var field1 = document.querySelector('#input1').value;
    var field2 = document.querySelector('#input2').value;
    ...
    /** prepare new node and insert */
    var newNode = '<ul>'+'<li>'+field1+'</li>'+'<li>'+field2+'</li>'+'</ul>';
    document.querySelector('body').appendChild(newNode);
});

相关问题
最新问题