Question

我需要在用户点击链接时动态创建文本框。而且我还需要根据用户decission删除该文本框。我正在尝试以下脚本。

    <script language="JavaScript" type="text/javascript">
var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
};
var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
        Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
        var f = function() {
          fn.call(Dom.get(el), window.event);
        };
        Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
};
Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {
    var el = document.createElement('p');
    el.innerHTML = '<br><input type="text">Remove(' + ++i + ')';
    Dom.add(el, 'content');
    Event.add(el, 'click', function(e) {
      Dom.remove(this);
    });
  });
});

</script>
<style>
#add-element {
  cursor: pointer;
}

</style>
<body>

<div id="doc">
  <p id="add-element">Add Elements</p>
  <div id="content"></div>
</div>

</body>

它会创建元素并删除元素。但是，它不允许我在新创建的文本框中输入文本（如果我需要）。我有什么问题。请帮助继续...请

Answer 1

我有什么问题。

那里对你自己有点苛刻！

您已将行删除click事件处理程序添加到<p>元素。点击事件会通过他们的祖先冒泡，因此如果您点击<input>元素进行聚焦，其父<p>也会收到一次点击，从而删除该行。

我建议只将click事件放在'删除'文本上。例如：

var row= document.createElement('div');
val remover= document.createElement('div');
var input= document.createElement('input');
remover.appendChild(document.createTextNode('Remove('+(++i)+')'));
row.appendChild(input);
row.appendChild(remover);
Dom.add(row, 'content');
Event.add(remover, 'click', function(e) {
    Dom.remove(row);
});

尽管可访问性设置“添加”和“删除”操作按钮（<input type="button">或<button>）可能会更好，但如果你不这样做，则看起来不像按钮不希望他们这样做。

Answer 2

试试这个。

 <script LANGUAGE="JavaScript"> 
     function addElement() {
        var num = document.getElementById('theValue').value;
        if(num == "0"){
      var ni = document.getElementById('pop');
      var newdiv = document.createElement('div');
      var divIdName = 'newDiv';

      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = " <table>"+
                            "<tbody>"+
                                "<tr>"+
                                    "<td>Name</td>"+
                                    "<td><input type=\"text\" id=\"name\" value=\"\" /></td>"+
                                "</tr>"+

                               " <tr>"+
                                    "<td></td>"+
                                    "<td><input type=\"submit\" value=\"save\" onclick=\"removeElement()\"/></td>"+
                                "</tr>"+
                            "</tbody>"+
                       " </table>";
      ni.appendChild(newdiv);
      document.getElementById('theValue').value = "1";
        }

    }
    function removeElement() {
        document.getElementById('theValue').value = "0";
      var d = document.getElementById('pop');
      var olddiv = document.getElementById('newDiv');
      d.removeChild(olddiv);
    }
    </script>

    <body>

    <div id="doc">
     <a href="javascript:addElement()">Add Element</a>
      <input type="hidden" value="0" id="theValue" /> 
      <div id="pop"></div>

    </div>

    </body>

Answer 3

使用jquery或prototype等javascript框架。这将确保您的代码与浏览器兼容，并且还会减少代码行。

使用javascript动态创建元素

3 个答案: