Question

我有这个JavaScript代码，目前在表格中添加新的textareas，输入等，并在每个id / name上添加一个唯一的数字

var i=1;
function addRow() {
          var tbl = document.getElementById('table1');
          var lastRow = tbl.rows.length;
          var iteration = lastRow - 1;
          var row = tbl.insertRow(lastRow);

          var descriptionCell = row.insertCell(0);
          var elDescription = document.createElement('textarea');
          elDescription.type = 'textarea';
          elDescription.name = 'description' + i;
          elDescription.id = 'description' + i;
          elDescription.cols = 70;
          elDescription.rows = 2;
          descriptionCell.appendChild(elDescription);

          var unitpriceCell = row.insertCell(1);
          var elUnitPrice = document.createElement('input');
          elUnitPrice.type = 'text';
          elUnitPrice.name = 'unitprice' + i;
          elUnitPrice.id = 'unitprice' + i;
          elUnitPrice.size = 20;
          unitpriceCell.appendChild(elUnitPrice);

          i++;
          form1.number.value=i;
          //alert(i);

          document.getElementById("line").innerHTML = "whatever";
}

我已删除该表，现在这不起作用。如何在不使用表格的情况下使用文本输入和文本区域进行相同的操作？

Answer 1

解决问题的一种相对简单的方法：

function createFieldset(opts){
    // default settings:
    var s = {
        // finds the first form, could use "document.forms[0]" instead
        'appendTo' : document.querySelector('form'),
        // an array of elements you want to create:
        'create' : ['input', 'textarea'],
        // the element you want to wrap those elements with:
        'wrapper' : 'fieldset',
        // the className to apply to the wrapping-element:
        'wrapperClassName' : 'group',
        // the prefix of the 'legend' tag (if you want to use one):
        'legendPrefix' : 'Group '
    },
        // finding out where the count should start (by finding
        // the number of current wrapping elements), could use
        // 'document.getElementsByTagName(s.wrapper).length' or
        // 'document.getElementsByClassName(s.wrapperClassName).length':
        count = document.querySelectorAll(s.wrapper).length,
        // creating the wrapper element:
        container = document.createElement(s.wrapper),
        // finding out whether to use textContent or innerText:
        textProp = 'textContent' in document.body ? 'textContent' : 'innerText',
        // caching temporary variables for later:
        created,
        tmp;

    // iterating through any user-set properties to update the
    // default settings:
    for (var prop in opts) {
        if (opts.hasOwnProperty(prop)) {
            s[prop] = opts[prop];
        }
    }

    // if we have a prefix of length > 0 once leading/trailing white-space
    // is removed, then:
    if (s.legendPrefix.trim().length > 0) {
        // create a 'legend' element:
        var legend = document.createElement('legend');
        // set the text of that legend element to 's.legendPrefix n'
        legend[textProp] = s.legendPrefix + count;
        // append that legend element to the container element:
        container.appendChild(legend);
    }

    // iterating over the array of elements to be created:
    for (var i = 0, len = s.create.length; i < len; i++){
        // caching the string of the element at position i in the array:
        tmp = s.create[i];
        // creating the element at that position:
        created = document.createElement(tmp);
        // setting the id, and name, to element-type + n:
        created.id = tmp + (count);
        created.name = tmp + (count);
        // appending the element to the wrapping element:
        container.appendChild(created);
    }

    // setting the className of the wrapping element:
    container.className = s.wrapperClassName;
    // inserting the element to the appendTo node, before its lastElementChild:
    s.appendTo.insertBefore(container, s.appendTo.lastElementChild);
}

createFieldset({
    'wrapperClassName' : 'first'
});

var button = document.querySelector('#addMore');
button.addEventListener('click', function (event) {
    event.preventDefault();
    createFieldset();
}, false);

JS Fiddle demo

参考文献：

JavaScript会在点击时添加新的输入字段

1 个答案: