Question

我正在使用此代码通过JavaScript动态生成文本框。它工作正常。但我的问题是所有生成的文本框都具有相同的名称。是否可以使用文本框名称为文本框计数添加前缀，以便发布文本框值？

<html>
      <head>
        <script>//addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'value':'txt2','size':'5'}); return false;
          function addElement(tag_type, target, parameters) {
           // var parameters = "'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'value':'txt2'";
            //alert(parameters);
            var newElement = document.createElement(tag_type);

            //Add parameters
            if (typeof parameters != 'undefined') {
              for (parameter_name in parameters) {
               // newElement.setAttribute(parameter_name, parameters[parameter_name]);
                   newElement.setAttribute("text","button","name:my_input_tag","value:my_input_tag");

              }
            }

            //Append element to target
            document.getElementById(target).appendChild(newElement);

            if(document.getElementById('txthidden').value == "") { 
            document.getElementById('txthidden').value = 1;
            } else {
            document.getElementById('txthidden').value = parseInt(document.getElementById('txthidden').value) + parseInt(1);
            }
         }

          function Submit() {
          var txtval = document.getElementById('my_input_tag').value;
            alert(txtval);
          }
        </script>
      </head>
      <body>
        <form method="post">
        <div id="targetTag"></div>
        <input type="submit" value="Check"/>
        </form>
        <input type="text" name="txthidden" id="txthidden" >

        <input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag1', 'name':'my_input_tag', 'type':'text', 'value':'txt2','size':'5'}); return false;" value="Add Input Tag" />

        <input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
        <input type="button" onClick="return Submit();" value="Save" />
      </body>
    </html>

Answer 1

    function addElement(tag_type, target, parameters) {        
        var newElement = document.createElement(tag_type);        

        //Add parameters        
        if (typeof parameters != 'undefined') {        
          for (parameter_name in parameters) { 
               newElement[parameter_name] = parameters[parameter_name];
          } 
        }        

        //Append element to target        
        document.getElementById(target).appendChild(newElement);        

        if (document.getElementById('txthidden').value == "") {         
          document.getElementById('txthidden').value = 1;        
        } else {        
           document.getElementById('txthidden').value = parseInt(document.getElementById('txthidden').value) + parseInt(1);        
        }        
     }

将html中的这一行更改为此

<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag' + document.getElementById('txthidden').value, 'name':'my_input_tag' + document.getElementById('txthidden').value, 'type':'text', 'value':'txt2','size':'5'}); return false;" value="Add Input Tag" />

以下是demo http://jsbin.com/emiza4/2

Answer 2

您可以执行更强大的更清晰解决方案。您可以将当前数量的输入字段保存在函数的属性中（而不是隐藏的输入字段）。

此外，您可以创建两个功能作为关注点分离和模块性 addElement和addInput，例如addInput将是{addElement的特殊情况1}}但如果要调用它，则必须键入：

// creates a child element to a given parent
function addElement(tag, target, params) {
    var el = document.createElement(tag);
    // Add parameters
    if (typeof params != 'undefined') {
        for (var parameter in params) {
          if (params.hasOwnProperty(parameter)) {
            el[parameter] = params[parameter];
          }
        }
    }

    // Append element to target
    document.getElementById(target).appendChild(el);
}

// creates an <input> child to a given target
function addInput(target, id, type, value, size) {
  var params = {
    id:    id + addInput.cnt,
    name:  id + addInput.cnt,
    type:  type || "text", 
    value: value,
    size:  size
  };
  addElement("input", target, params);
  addInput.cnt++;
}

addInput.cnt = 1;

<强> HTML

onclick="addInput('targetTag', 'my_input_tag', 'text', 'txt2', '5');"

如何在JavaScript中的newElement.setAttribute中传递参数a

2 个答案: