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>