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>
js动态添加控件(输入框为例)的更多相关文章
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- VC中动态添加控件
VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- winform导入导出excel,后台动态添加控件
思路: 导入: 1,初始化一个OpenFileDialog类 (OpenFileDialog fileDialog = new OpenFileDialog();) 2, 获取用户选择文件的后缀名(s ...
- asp.net动态添加控件学习
看了老师的教程后,自己一点感悟记录下来: 1.在页面提交后,动态生成的控件会丢失, 但如果生成控件的代码在pageload中,就可以,原理是每次生成页面都执行生成. 2.动态按件或页面原来控件, 在页 ...
- WPF:理解ContentControl——动态添加控件和查找控件
WPF:理解ContentControl--动态添加控件和查找控件 我认为WPF的核心改变之一就是控件模型发生了重要的变化,大的方面说,现在窗口中的控件(大部分)都没有独立的Hwnd了.而且控件可以通 ...
- 怎样在不对控件类型进行硬编码的情况下在 C#vs 中动态添加控件
文章ID: 815780 最近更新: 2004-1-12 这篇文章中的信息适用于: Microsoft Visual C# .NET 2003 标准版 Microsoft Visual C# .NET ...
- WPF 动态添加控件以及样式字典的引用(Style introduction)
原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的 ...
随机推荐
- 用Python操作Excel,实现班级成绩的统计
本次是在原来有一定格式的Excel文档中补充成绩. 安装的模块:xlwt . xlrd .xlutils xlrd的模块是只用读取xls文件,不能写文件,同理xlwt,只(新建写)不读已有的xls, ...
- Django前期知识准备
一. WEB应用 WEB应用程序是一种可以通过WEB访问的应用程序, 程序的最大好处是用户很容易访问应用程序, 用户只需要有浏览器即可, 不需要再安装其他软件. 应用程序有两种模式: C/S, B/S ...
- Linux三种SSH协议登陆方式
在实际工作中遇到了三种不同SSH协议登陆Linux服务器的方式,由简单到复杂分别阐述:一.最简单也是最不安全的root账号密码登陆通过root账号+root密码登陆Linux服务器. 二.普通用户登陆 ...
- 【VS开发】使用VS2010创建MFC ActiveX工程项目
1.ActiveX的基本概念 ActiveX控件可以看作是一个极小的服务器应用程序,它不能独立运行,必须嵌入到某个容器程序中,与该容器一起运行.这个容器包括WEB网页,应用程序窗体等... Activ ...
- 《ThinkPHP 5.0快速入门》 请求和响应
1.请求对象 //传统调用$request = Request::instance();//实例化对象 $request->url();//获取当前的域名 //继承think\Controlle ...
- 让样式文件,或js文件的相对路径,变成成绝对路径
添加两行代码即可 <% String path = request.getContextPath(); String basePath = request.getScheme() + " ...
- phpstorm设置的快捷键突然失效了,提示: IdeaVim ...
下班后,打开PHPstorm,突然感觉不对,经常用的快捷键突然用不了. 例如按了 Ctrl+F 快捷键后,提示: IdeaVim! Using the Ctrl+F shortcut for Vim ...
- (模板)hdoj5977 Garden of Eden(点分治)
题目链接:https://vjudge.net/problem/HDU-5977 题意:给一颗树,每个结点上有一个权值a[i],a[i]<=10,求有多少条路径满足这条路径上所有权值的结点都出现 ...
- [bzoj1775][Usaco2009 Dec]Vidgame 电视游戏问题_背包dp
1775: [Usaco2009 Dec]Vidgame 电视游戏问题 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1775 题解: 发 ...
- Design Phone Directory
Design a Phone Directory which supports the following operations: get: Provide a number which is not ...