兼容IE、Chrome,Opera动态添加文本框

因为最近在做一个优惠券验证的插件，优惠券在购买多件项目后一对多模式动态生成（1个优惠券编号，多个密码），需要动态添加生成密码框，删除按钮，做的过程中发现，innerHTML累加的方式与appendChild 来做，总是不尽如意，浏览器不兼容，找了好多资料，发现了用表格 insertRow() 来做倒是不错的一个点子，记录随笔，旨在学习，以后很有可能还有遇到。

        

        <script type="text/javascript">
         
            var n = 1;
            function addtext(id) {
                var row, cell, str;
                //insertRow(-1)   生成    <tbody> <tr><td> </td></tr></tbody>
                row = document.getElementById("tb").insertRow(-1);
                if (row!=null) {
                    cell = row.insertCell(-1);
                    cell.innerHTML = "密码" + (n + 1) + "：<input type='text' id='txt" + n + "' name='txt" + n + "' /><input type='button' id='btndel' value='删除' onclick=\"delrow(this,'tb'); \" /> ";
                    n++;
                }
            }

            function delrow(obj, id) {
                var curRow;
                //obj.parentNode  <td>
                //obj.parentNode.parentNode  <tr>
                curRow = obj.parentNode.parentNode; 
                var index = curRow.rowIndex;
                document.getElementById(id).deleteRow(index);
                document.getElementById("").appendChild
            }

        
        </script>
 <body >
            密码1：   <input type="text" id ="txt1" name ="txt1" /> <input type="button" id ="btnadd"   onclick="addtext('td');" value="添加" />
            <table id ="tb" border="1" >
            
            </table>
    </body>

 

  

posted @ 2012-08-22 15:20  TakeTry  阅读(322)  评论(0)    收藏  举报