Question

我的添加/删除字段代码有问题。

如果我在phpfiddle中运行此代码，并使用添加按钮创建额外字段。

<script>
        var i = 1;
  function addKid(){
    if (i <= 4){
       i++;
      var div = document.createElement('div');
      div.style.width = "44%";
      div.style.height = "26px";
      div.style.color = "white";
      div.setAttribute('class', 'myclass');
     div.innerHTML = 'Child : <input id="child_'+i+'" type="text" name="child_'+i+'" > Ages : <input id="ages_'+i+'" type="text" name="ages_'+i+'"><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
      document.getElementById('kids').appendChild(div);
      }
      }
      function removeKid(div) {
        document.getElementById('kids').removeChild( div.parentNode );
        i--; }

</script>

 <div id="kids">
 Child : <input id="child_1" type="text" name="child_1" onfocus="emptyElement('status')" onkeyup="restrict('child_1')" maxlength="50">
 Ages :  <input id="ages_1" type="text" name="ages_1" onfocus="emptyElement('status')" onkeyup="restrict('ages_1')" maxlength="10"><input type="button" id="add_kid()" onClick="addKid()" value="+" />
   </div>

然后如果我在第一个字段上使用firebug，我就会得到它。

<input id="child_1" type="text" maxlength="50" onkeyup="restrict('child_1')" onfocus="emptyElement('status')" name="child_1">

<input id="ages_1" type="text" maxlength="10" onkeyup="restrict('ages_1')" onfocus="emptyElement('status')" name="ages_1">

在我添加的额外字段中，我使用了firebug。

<input id="child_2" type="text" name="child_2">

<input id="ages_2" type="text" name="ages_2">

如何在这样的额外添加字段中添加“restrict”和“maxlength”。

<input id="child_2" type="text" name="child_2" onkeyup="restrict('child_1')" maxlength="50">

<input id="ages_2" type="text" name="ages_2" onkeyup="restrict('ages_1')" maxlength="10">

如果我可以用按钮组成5个额外的字段，他们怎么能得到像这样的“限制”和“最大长度”。

<input id="child_3" type="text" name="child_3" onkeyup="restrict('child_1')" maxlength="50">

<input id="ages_3" type="text" name="ages_3" onkeyup="restrict('ages_1')" maxlength="10">


<input id="child_4" type="text" name="child_4" onkeyup="restrict('child_1')" maxlength="50">

<input id="ages_4" type="text" name="ages_4" onkeyup="restrict('ages_1')" maxlength="10">


<input id="child_5" type="text" name="child_5" onkeyup="restrict('child_1')" maxlength="50">

<input id="ages_5" type="text" name="ages_5" onkeyup="restrict('ages_1')" maxlength="10">

Answer 1

创建这些属性时，请将这些属性放在input标记内：

div.innerHTML = 'Child : <input id="child_'+i+'" type="text" name="child_'+i+'" maxlength="50" onkeyup="restrict(\'child_'+i+'\')"> Ages : <input id="ages_'+i+'" type="text" name="ages_'+i+'" maxlength="10" onkeyup="restrict(\'ages_'+i+'\')"><input type="button" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';

使用JavaScript设置HTML代码时，有时可能需要转义引号，例如：

onkeyup="restrict(\'child_'+i+'\')"

你也不应该：

重复id属性
在()属性

id

添加/删除表单缺少“restrict”和“maxlength”

1 个答案: