正文
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>
