jquery 追加tr和删除tr示例代码


Posted in Javascript onSeptember 12, 2013
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script> 
$(function(){ 
$("#getAtr").click(function(){ 
$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(k){ 
$(k).parent().remove(); 
} 
</script> 
-------------------------------------------------------------------------------- 
html部分 
<table align="center" border="1" cellpadding="0" cellspacing="0" 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>
Javascript 相关文章推荐
javascript椭圆旋转相册实现代码
Jan 16 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
实现只能输入数字的input不用replace方法
Sep 12 #Javascript
jQuery 三击事件实现代码
Sep 11 #Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 #Javascript
查找iframe里元素的方法可传参
Sep 11 #Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 #Javascript
$.get获取一个文件的内容示例代码
Sep 11 #Javascript
JQuery触发事件例如click
Sep 11 #Javascript
You might like
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
jQuery.each()用法分享
2012/07/31 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
Mac下安装vue
2018/04/11 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
python去除文件中重复的行实例
2018/06/29 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python ftplib模块使用代码实例
2019/12/31 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
幼儿园家长评语
2014/02/10 职场文书
三万活动总结
2014/04/28 职场文书
环保建议书500字
2014/05/14 职场文书
新学期开学演讲稿
2014/05/24 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android