zoukankan      html  css  js  c++  java
  • js动态添加控件(输入框为例)

    写在前面

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

    供大家参考

    开始复制代码了

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

      这是表单代码

    <form id="t">
        <table id="table" style="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="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="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>

      

  • 相关阅读:
    Yii数据库操作增删改查-[增加查询更新删除 AR模式]
    Yii2 关于时间格式的用法
    常用Linux命令
    数据库设计规范
    PHP代码规范
    git fetch 的简单用法:更新远程代码到本地仓库及冲突处理
    yii2 URL重写 nginx的配置
    Linux下免安装mysql
    在CentOS下搭建自己的Git服务器
    开源技术推荐之个人使用心得
  • 原文地址:https://www.cnblogs.com/fjrgg/p/9857578.html
Copyright © 2011-2022 走看看