jQuery如何动态添加具有删除按钮的行
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>jQuery动态添加和删除行-蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#getAtr").click(function(){
var $str='';
$str+="<tr align='center'>";
$str+="<td><input type='text' name='advTitle[]'/></td>";
$str+="<td><input type='file' name='img[]' /></td>";
$str+="<td><input type='text' name='advContent[]' /></td>";
$str+="<td><input type='text' name='advSource[]' /></td>";
$str+="<td><input type='text' name='advAuthor[]' /></td>";
$str+="<td><input type='text' name='advPosition[]' /></td>";
$str+="<td onClick='getDel(this)'><a href='#'>删除</a></td>";
$str+="</tr>";
$("#addTr").append($str);
});
});
function getDel(obj)
{
$(obj).parent().remove();
}
</script>
</head>
<body>
<table align="center" border="1"width="100%">
<tr align="center">
<td>蚂蚁部落一</td>
<td>蚂蚁部落二</td>
<td>蚂蚁部落三</td>
<td>蚂蚁部落四</td>
<td>蚂蚁部落五</td>
<td>蚂蚁部落六</td>
<td align="center"><a href="#" id="getAtr">追加内容</a></td>
</tr>
<tbody id="addTr">
<tr align="center">
<td><input type="text" name="advTitle[]"/></td>
<td><input type="file" name="img[]" /></td>
<td><input type="text" name="advContent[]" /></td>
<td><input type="text" name="advSource[]" /></td>
<td><input type="text" name="advAuthor[]" /></td>
<td><input type="text" name="advPosition[]" /></td>
<td></td>
</tr>
</tbody>
<tr align="center">
<td colspan="5"><input type="submit" value="全部添加" /></td>
</tr>
</table>
</body>
</html>
一.实现原理:
原理特别的简单，就是事先声明一个字符串，此字符串就是要添加的行的内容，当点击追加按钮之后，就会通过append()函数将此字符串追加到表格的末尾，当点击删除按钮就会删除按钮所在的父节点，也就是当前行。
jQuery如何动态添加具有删除按钮的行的更多相关文章
- jQuery实现动态添加和删除一个div
本文主要给大家简单介绍一下如何动态的在一个元素添加和删除div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> ...
- jQuery动态添加、删除按钮及input输入框
输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...
- jquery 如何动态添加、删除class样式方法介绍
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...
- jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...
- Jquery Validate动态添加和删除校验规则
以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...
- js动态添加和删除table的行例子
<table id="table_report" class="table table-striped table-bordered table-hover&quo ...
- jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- Unity NGUI中动态添加和删除sprite
(以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链 ...
随机推荐
- Oracle数据库——表的创建与管理
一.涉及内容 1.掌握使用OEM工具创建.修改和删除表. 2.掌握使用SQL语句创建.修改和删除表. 3.掌握使用SQL语句插入.修改和删除数据. 4.理解各种约束的作用,并能够使用OEM工具和SQL ...
- Asp.net获取用户真实Ip地址
/// <summary> /// 获取远程访问用户的Ip地址 /// </summary> /// <returns>返回Ip地址</returns> ...
- 【转】C#综合揭秘——通过修改注册表建立Windows自定义协议
引言 本文主要介绍注册表的概念与其相关根项的功能,以及浏览器如何通过连接调用自定义协议并与客户端进行数据通信.文中讲及如何通过C#程序.手动修改.安装项目等不同方式对注册表进行修改.其中通过安装项目对 ...
- setOnKeyListener响应两次问题
1.Android一次按下操作定义了两个事件,ACTION_DOWN和ACTION_UP,即按下和松手两个动作. 2.除了判断是什么按键被按下,还应该判断按键是up还是down 3.调用eve ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- php 同步因子的并发处理
在php中,如果处理支付时,会涉及到并发. 具体体现在同步通知支付结果和异步通知结果. 拿支付宝来说,同步通知call_back和异步通知notify是没有固定先后顺序的. 有可能notify先通知到 ...
- [转]Linux环境下查看线程数的几种方法
1.cat /proc/${pid}/status 2.pstree -p ${pid} 3.top -p ${pid} 再按H,或者直接输入 top -bH -d 3 -p ${pid} top ...
- IOS开发-UITextField代理常用的方法总结
1.//当用户全部清空的时候的时候 会调用 -(BOOL)textFieldShouldClear:(UITextField *)textField: 2.//可以得到用户输入的字符 -(BOOL)t ...
- Js闭包函数
一.变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域.变量的作用域无非就是两种:全局变量和局部变量.Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. ( ...
- java获取url中的参数
获取地址栏中的url中的userName的值 String userName=new String(request.getParameter("userName")); 获取中文的 ...