js动态添加控件（输入框为例）

写在前面

　　昨天得到一个需求，需要在账户登记页面中动态添加输入框，经过半天的捣鼓，最终完美成型，写下来跟大家分享下，

供大家参考

开始复制代码了

　　如果复制了我所有代码的话，注意看js最后面方法的备注，最开始表单是隐藏的，需点击显示按钮

　　这是表单代码

<form id="t">
    <table id="table" style="width:100%;height:100%;table-layout:fixed;display: none;" class="nui-form-table">
        <tr>
            <td width="10%"></td>
            <td width="10%">
                <label>券商1</label>
            </td>
            <td width="25%"><input type="text"  name="xws.qs1" required="true" maxlength="30" style="width:100%"/></td>
            <td width="10%"></td>
            <td width="10%">
                <label>交易单元1</label>
            </td>
            <td width="25%"><input type="text"  name="xws.qs1" required="true" maxlength="30" style="width:100%"/></td>
            <td width="10%">
                <input type="button" id="new" value="新增" />
            </td>
        </tr>
    </table>
            <input type="button" id="btn" value="显示" />
</form>

　　

　　这是js代码

<script type="text/javascript">
    var rowWhere=1;

 
    document.getElementById('new').onclick = function() {
        var table =document.getElementById("table");
        var rows = table.rows.length+1;
　　　　//new部分控件
        var input1 = document.createElement('input');
        var label1 = document.createElement('label');
　　　　　　//这里是将新列插在指定的位置，0代表第一列
        var tr = table.insertRow(rowWhere);
        rowWhere=rowWhere+1;
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');

　　　　　　//添加各个属性
        label1.innerHTML = "券商"+rows;
        input1.id="xws.qs"+rows;
        input1.setAttribute("name","xws.qs"+rows);
        input1.setAttribute("autocomplete","off");
        input1.setAttribute("maxlength","30");
        input1.setAttribute("placeholder","");

        td2.appendChild(label1);
        td3.appendChild(input1);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
    };

　　　//最开始的时候是隐藏的，需点击才显示控件
　　　　//写这个方法是测试我模块的需求，没啥意义
    document.getElementById('btn').onclick = function(){
        document.getElementById('table').style.display="";
    };
</script>

　　

转载于:https://www.cnblogs.com/fjrgg/p/9857578.html