Jquery 动态追加控件并获取值
先展示通过动态添加控件的结果:
实现步骤:
1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script>
2.引用BootStrap(纯属为了控件好看) <link href="css/bootstrap.css" rel="stylesheet" />
3.画一个Table控件用于存放按钮 控件
<table id="tabConten" cellpadding="10" cellspacing="0">
<tr>
<td style=" border-left-width:0px;" colspan="5" >
<input type="button" value="添加人员" style="margin-right:0px;" onclick="add()" class="btn btn-info"/>
<input id="btn_save" type="button" value="查看" class="btn btn-success" onclick="query()"/>
</td>
</tr>
<tr class="addPersonTh">
<td class="tdFontW tdCos_01"><span style="color: #F00" class="tdAlignL">*</span> 姓名</td>
<td class="tdFontW tdCos_02"><span style="color: #F00" class="tdAlignL">*</span> 性别</td>
<td class="tdFontW tdCos_03"><span style="color: #F00" class="tdAlignL">*</span> 手机</td>
<td class="tdFontW tdCos_04"><span style="color: #F00" class="tdAlignL">*</span> 邮箱</td>
<td class="tdFontW tdCos_05">操作</td>
</tr>
<tr class="addPerson">
<td>
<span class="span_none">A: </span>
<input type="text" maxlength="10" />
</td>
<td>
<select class="sex_style">
<option value="1">男</option>
<option value="0">女</option>
</select>
</td>
<td><input type="text" maxlength="11" /></td>
<td><input type="text" maxlength="50" /></td>
<td><a href="#" class="del">删除</a></td>
</tr>
</table>
4.设置布局样式
<style type="text/css">
#index /* 全局样式 */
{
margin:0 auto;
padding:0 auto;
width:900px;
/*border:1px solid red;*/
font-size:15px;
}
#tabConten{ /* 表格样式 */
margin:0 auto;
border-collapse: collapse;
text-align:center;
}
#tabConten tr td{ /* 表格内td设置 */
border:0px solid gray;
}
.sex_style /* 设置性别下拉框样式 */
{
width:70px;
}
</style>
5.编写js脚本
<script type="text/javascript"> /* 增加tr行 */
var num = 1; //全局变量 默认为一组控件
function add() { /* 增加人员行 */
num++;
var str = String.fromCharCode(64 + num);
var $tr = $("<tr class=\"addPerson\"><td><span class=\"span_none\"> " + str + ": </span><input type=\"text\" maxlength=\"10\"/></td><td><select class=\"sex_style\" ><option value=\"1\">男</option><option value=\"0\">女</option></select></td><td><input type=\"text\" maxlength=\"11\" /></td><td><input type=\"text\" maxlength=\"50\"/></td><td><a href=\"#\" class=\"del\">删除</a></td></tr>");
var $parent;
if (num == 1) {
$parent = $("table tr:.addPersonTh"); //num默认为1 如果当前没元素就在标题后添加
} else {
$parent = $("table tr:.addPerson:eq(" + (num - 2) + ")"); //num默认为1 进入add事件首先将num+1,所以此处要获取在哪里添加元素需-2
}
$parent.after($tr);
init();
}
function query() { /* 获取人员行 */
for (var i = 0; i < num; i++) {
for (var j = 0; j < 4; j++) {
if (j == 1) {
alert("第"+(i+1)+"行第"+(j+1)+"的值是:"+$("table tr:.addPerson:eq(" + i + ") td:eq(" + j + ") select:.sex_style option:selected").val());
}
else {
alert("第"+(i+1)+"行第"+(j+1)+"的值是:"+$("table tr:.addPerson:eq(" + i + ") td:eq(" + j + ") :text").val());
}
}
}
}
function init() { /* 删除人员行 */
$("table tr td a.del").unbind("click").click(function () {
$(this).parent().parent().remove();
for (var i = 0; i < num - 1; i++) {
var str = String.fromCharCode(65 + i) + ":";
$("table tr:.addPerson:eq(" + i + ") span").html(str);
}
num--;
});
}
</script>
其中追加的位置可分为四种,根据实际需求使用。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
Jquery 动态追加控件并获取值的更多相关文章
- JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- WPF-学习笔记 动态修改控件Margin的值
原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...
- C#后台创建控件并获取值
前台代码 <form id="form1" runat="server"> <div> <div class="item ...
- C# 动态代码生成控件后其他事件不能获取该控件的值
1.新建web项目,添加两个Button控件,结果如图. 2.Button按钮控件点击事件代码如下 protectedvoid Button1_Click(object sender, EventAr ...
- android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- python通过win32api轻松获取控件的属性值
1.如何利用句柄操作windows窗体 首先,获得窗体的句柄 win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd) ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- jquery操作select2控件
(一)select2常用的操作:添加.移除.获取选中的value()与text() (1)移除事件:$("#select_id").unbind("change" ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
随机推荐
- 【Django】数据迁移问题
最近发现,Django在修改models之后重新生成迁移文件(这里可以生成),再进行数据库迁移的时候老是出错,查询数据库时老是找不到表格或者字段. 尝试过重新新建项目,新建一个同名APP,然后mode ...
- MySQL安装与启动
1.MySQL安装包下载 下载地址:https://dev.mysql.com/downloads/mysql/ 这里我的电脑是WIN764位的,大家根据自己的电脑自己选择要下载的包 2.解压安装 解 ...
- zabbix安装(Ubuntu)
zabbix的安装 Zabbix监控架构至少需要server,agent,web模块.mysql.web部分和server安装在同一台机器上. Zabbix安装前服务器要做时间同步(ntp) 1.创建 ...
- Linux下搭建ftp服务
Linux下ftp服务可以通过搭建vsftpd服务来实现,以CentOS为例,首先查看系统中是否安装了vsftpd,可以通过执行命令 rpm -qa | grep vsftpd 来查看是否安装相应的包 ...
- pytbull:入侵检测/预防系统测试框架 (转)
pytbull:入侵检测/预防系统测试框架 或许当你安装了 IDS/IPS(入侵检测/预防系统)之后就感觉系统安全无忧了,但如何确信?答案是测试.pytbull 是使用 Python 开发而成的 ID ...
- NGS NGS ngs(hisat,stringtie,ballgown)
NGS ngs(hisat,stringtie,ballgown) #HISAT (hierarchical indexing for spliced alignment of transcripts ...
- linux rescue 修复引导 与linux下修复windows引导
在windows有引导的情况下修复linux引导 插入U盘启动 进入rescue模式 fdisk -l 查看分区情况 chroot /mnt/sysimage/ 进入系统 grub-install / ...
- CentOS6.9安装Python-3.6.3
CentOS6.9上默认安装的python版本是2.6的.因为系统自带的python会被系统很多软件环境依赖使用,所以不要卸载原来的Python版本,根据需要进行安装新版本即可,本人此处安装的是3.6 ...
- 【转】最近用Timer踩了一个坑,分享一下避免别人继续踩
[转]最近用Timer踩了一个坑,分享一下避免别人继续踩 最近做一个小项目,项目中有一个定时服务,需要向对方定时发送数据,时间间隔是1.5s,然后就想到了用C#的Timer类,我们知道Timer 确实 ...
- SAS 输入与输出格式
SAS 输入与输出格式 一.认识SAS中的数据格式 SAS 中的格式有: 数字型 字符型 日期型 1.其中数字型的格式有一下集中表示方式: 整型数值:321 浮点数值:321.123 带逗号的数值:1 ...