【精简实用系列】点击按钮增加文本框无BUG,文本框内容不会消失

精简实用8年前 (2017-07-19)13570

点击按钮增加文本框无BUG,文本框内容不会消失

代码如下:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>点击按钮增加文本框无BUG,文本框内容不会消失</title>
    <script>
      var count = 0;
      
      function addByScript() {
        var table = document.getElementById("tbl1");
        var newRow = table.insertRow(table.rows.length);
        newRow.id = "row" + count;
        
        var contentCell = newRow.insertCell(-1);
        contentCell.innerHTML = '真实姓名:<input type="text" name="relname[]" /> 手机号码:<input type="text" name="telnum[]" />';
        contentCell = newRow.insertCell(-1);
        
        var delBtn = document.createElement("input");
        delBtn.type = "button";
        delBtn.className = "button";
        delBtn.id = "btnDel"+count;
        delBtn.value = "删除";
        delBtn.onclick = new Function("del(this)");
        contentCell.appendChild(delBtn);
                
        count++;
      }
      
      function del(obj) {
        var row = obj.parentNode.parentNode;
        row.parentNode.removeChild(row);
      }      
    </script>
  </head>
  <body>
      <input type="button" class="button" value="新增" onclick="addByScript()"/>
      <table id="tbl1">
      </table>
  </body>
</html>



发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。