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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
js正确获取元素样式详解
Aug 07 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript数据类型示例分享
Jan 19 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
javascript实现弹出层效果
Dec 10 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
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Python群发邮件实例代码
2014/01/03 Python
Python的函数嵌套的使用方法
2014/01/24 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
乐山大佛导游词
2015/02/02 职场文书
遗失说明具结保证书
2015/02/26 职场文书
社区服务理念口号
2015/12/25 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书