Question

我正在创建一个表单，我有一个用于客户端信息的字段集，以及在需要时为另一个客户端添加另一个字段集的功能。
截至目前，附加字段集'字段ID加1，这是好的，但我希望字段集中的每个字段也加1。

var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("client1").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placehere").appendChild(oClone);

Answer 1

试试这个：它只会向用户输入表单元素添加更新的ID。

如果您要更新字段集中的所有子元素，请删除 if 语句:)

var _counter = 0, _fcounter = 0;

function add(){

    var i, j, 
      oClone = document.getElementById("client1").cloneNode(true),
      fldTypes = "INPUT SELECT TEXTAREA CHECKBOX RADIO",
      fields  = oClone.children;

    _counter++;
    oClone.id += (_counter + "");

    for(i=0, j= fields.length; i<j; i++){
        if(fldTypes.indexOf(fields[i].nodeName) > -1){ //checks for user input form  elements
             _fcounter ++;
           fields[i].id += (_fcounter + "");
        }
    }

    document.getElementById("placehere").appendChild(oClone);

    return oClone;
}

参见示例： http://jsfiddle.net/yfn6u/8/

Answer 2

这是一个克隆和增加字段集以及集合中任何子元素的页面。它假设fieldset和children输入都有一个数字后缀。即fieldset1和textfield2等

干杯。

<!DOCTYPE html>
<html>
<head>


  <script type='text/javascript'>
    // store a reference to the last clone so I can increment off that.
    window.lastClone = null;

    function incrementId(id) {
      // regexp is looking for text with a number suffix.  adjust accordingly.
      var numberSuffixRegExp = /(.*?)(\d*)$/;
      var regExpMatch = numberSuffixRegExp.exec(id);
      // assuming a match will be made here, and position 1 and 2 are populated.
      var prefix = regExpMatch[1];
      var counter = parseInt(regExpMatch[2]);
      counter++;
      return prefix + counter;
    }

    function cloneFieldSet() {

      if (!window.lastClone) {
        window.lastClone = 'fieldset1';
      }

      var newFieldSet = document.getElementById(lastClone).cloneNode(true);

      newFieldSet.id = incrementId(newFieldSet.id);

      var tagNames = ['input', 'select', 'textarea'];  // insert other tag names here
      var elements = [];

      for (var i in tagNames) {
        // find all fields for each tag name.
        var fields = newFieldSet.getElementsByTagName(tagNames[i]);
        for(var k = 0; k < fields.length; k++){
          elements.push(fields[k]);
        }
      }

      for (var j in elements) {
        // increment the id for each child element
        elements[j].id = incrementId(elements[j].id);
      }

      document.getElementById("placehere").appendChild(newFieldSet);
      window.lastClone = newFieldSet.id;
    }

  </script>


</head>
<body>
<input type='button' value='Clone' onclick='cloneFieldSet()'/><br/>
<fieldset id='fieldset1'>
  <table>

    <tr>
      <td>Label One:</td>
      <td><input type='text' id='fieldOne1'/></td>
    </tr>
    <tr>
      <td>Label Two:</td>
      <td><input type='text' id='fieldTwo1'/></td>
    </tr>
    <tr>
      <td>Label Three:</td>
      <td><select id='selectOne1'>
        <option>Some Value</option>
      </select></td>
    </tr>
  </table>
</fieldset>
<div id='placehere' style='margin:10px 0; border:1px solid black'>
</div>

</body>
</html>

表格中的动态部分

2 个答案: