Javascript函数添加/删除字段 [英] Javascript Function to add/remove fields

问题描述

我对JavaScript并不是很有经验，但是这段代码与我所寻找的代码类似，尤其是它包含删除字段链接的代码。这里是Javscript函数：

  //动态添加更多字段。 
函数addField（field，area，limit）{
 if（！document.getElementById）return; //防止旧版浏览器进一步发展。 
 var field_area = document.getElementById（area）; 
 var all_inputs = field_area.getElementsByTagName（input）; //获取给定区域中的所有输入字段。 
 //找到列表的最后一个元素的计数。它将采用'< field>< number>'的格式。如果参数中给出的
 //字段为'friend_'，则最后一个id将为'friend_4'。 
 var last_item = all_inputs.length  -  1; 
 var last = all_inputs [last_item] .id; 
 var count = Number（last.split（_）[1]）+ 1; 
 
 //如果已达到最大元素数量，请退出该功能。 
 //如果给定的限制低于0，可以创建无限数量的字段。 
 if（count> limit&& limit> 0）return; 
 
 if（document.createElement）{// W3C Dom方法。 
 var li = document.createElement（li）; 
 var input = document.createElement（input）; 
 input.id = field + count; 
 input.name = field + count; 
 input.type =text; //字段类型 - 可以是任何有效的输入类型，如文本，文件，复选框等。
 li.appendChild（input）; 
 field_area.appendChild（li）; 
} else {//旧方法
 field_area.innerHTML + =< li>< input name ='+（field + count）+'id ='+（field + count ）+'type ='text'/>< / li>; 
 
 
 $ / code $ / pre 
 
 
以下是表单的HTML：
 < form name =frmmethod =POST> 
< strong>中性列表< / strong>< br /> 
< ol id =neutrals_area> 
< li>< input type =textname =neutral_1id =neutral_1/> < a style =光标：指针;颜色：蓝色; onclick =this.parentNode.parentNode.removeChild（this.parentNode）;>删除字段< / a>< / li> 
< li>< input type =textname =neutral_2id =neutral_2/> < a style =光标：指针;颜色：蓝色; onclick =this.parentNode.parentNode.removeChild（this.parentNode）;>删除字段< / a>< / li> 
< li>< input type =textname =neutral_3id =neutral_3/> < a style =光标：指针;颜色：蓝色; onclick =this.parentNode.parentNode.removeChild（this.parentNode）;>删除字段< / a>< / li> 
< li>< input type =textname =neutral_4id =neutral_4/> < a style =光标：指针;颜色：蓝色; onclick =this.parentNode.parentNode.removeChild（this.parentNode）;>删除字段< / a>< / li> 
< li>< input type =textname =neutral_5id =neutral_5/> < a style =光标：指针;颜色：蓝色; onclick =this.parentNode.parentNode.removeChild（this.parentNode）;>删除字段< / a>< / li> 
< / ol> 
< input type =buttonvalue =添加中性字段onclick =addField（'neutrals_area'，'neutral _'，0）; /> 
< / form> 
  
但是，我希望使用删除链接代码生成其他字段，而不仅仅是在脚本中有代码的人。我知道自定义函数必须进行调整以包含该行为，但在尝试使该函数发挥作用时遇到各种麻烦。通过编辑代码来阅读，在addField函数底部的} else {之后的旧方法中执行它似乎很简单：
 } else {//老方法
 field_area.innerHTML + =< li>< input name ='+（field + count）+'id ='+（field + count）+'type ='text'/>< a style =cursor：pointer; color：blue;onclick =this.parentNode.parentNode.removeChild（this.parentNode）;>删除字段< / A>< /锂>中; 
} 
  
然而，我很难理解如何将它包含在W3C DOM方法？
解决方案
我将与Kappa不同，并鼓励您坚持不懈地继续做你正在做的事情。 JQUery对于它的功能非常棒，但它常常是一个拐杖，知道你在做什么以及为什么在使用JavaScript时要做到这一点非常重要。特别是如果你正在学习在这个领域找到工作，那么你需要直接的JavaScript。 
 
 
好消息，你要做的事实际上很简单！  
 
 
  var li = document.createElement（li）; 
 var input = document.createElement（input）; 
 input.id = field + count; 
 input.name = field + count; 
 input.type =text; //字段类型 - 可以是任何有效的输入类型，如文本，文件，复选框等。
 li.appendChild（input）; 
 field_area.appendChild（li）; 
 //创建删除链接
 removeLink = document.createElement（'a'）; 
 removeLink.onclick = function（）{
 this.parentNode.parentNode.removeChild（this.parentNode）
} 
 removalText = document.createTextNode（'Remove Field'）; 
 removeLink.appendChild（removalText）; 
 li.appendChild（removeLink）; 
  
以下是JSFiddle上的代码： http://jsfiddle.net/r9bRT/  
 
I'm not very experienced with JavaScript, but this code was similar to what I was looking for , especially where it includes the 'Remove Field' link.  Here is the Javscript function:  
//Add more fields dynamically.
function addField(field,area,limit) {
    if(!document.getElementById) return; //Prevent older browsers from getting any further.
    var field_area = document.getElementById(area);
    var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
    //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
    //      field given in the argument is 'friend_' the last id will be 'friend_4'.
    var last_item = all_inputs.length - 1;
    var last = all_inputs[last_item].id;
    var count = Number(last.split("_")[1]) + 1;

    //If the maximum number of elements have been reached, exit the function.
    //      If the given limit is lower than 0, infinite number of fields can be created.
    if(count > limit && limit > 0) return;

    if(document.createElement) { //W3C Dom method.
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = field+count;
        input.name = field+count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
    } else { //Older Method
        field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
    }
}
Here is the HTML for the form:
<form name="frm" method="POST">
<strong>Neutral List</strong><br />
<ol id="neutrals_area">
<li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
</ol>
<input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" />
</form>
However, I would like the additional fields to generate with the 'Remove Link' code, not just the ones with code in the script.  I understand that the custom functions have to be adjusted to include that behavior, but am having all kinds of trouble trying to get that function to work.  It seems straightforward to do it in the older method following the "} else {" at the bottom of the addField function by editing the code to read:
} else { //Older Method
    field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>";
}
However, I'm stumped as to how to include it in the W3C DOM method?
解决方案
I'm going to differ with Kappa and encourage you strongly to keep doing what you're doing. JQUery is great for what it is, but it is too often a crutch, and it's so important to know what you're doing and why you're doing it when working with javascript. Especially if you are learning to get a job in the sector, you will need straight JavaScript.

The good news, what you're trying to do is actually quite simple!
    var li = document.createElement("li");
    var input = document.createElement("input");
    input.id = field+count;
    input.name = field+count;
    input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
    li.appendChild(input);
    field_area.appendChild(li);
    //create the removal link
    removalLink = document.createElement('a');
    removalLink.onclick = function(){
        this.parentNode.parentNode.removeChild(this.parentNode)
    }
    removalText = document.createTextNode('Remove Field');
    removalLink.appendChild(removalText);
    li.appendChild(removalLink);
Here's the code on JSFiddle: http://jsfiddle.net/r9bRT/

                        
这篇关于Javascript函数添加/删除字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！