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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
分析JS中this引发的bug
Dec 12 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 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中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
php中final关键字用法分析
2016/12/07 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
工商管理实习自我鉴定
2013/09/28 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
纪律教育月活动总结
2014/08/26 职场文书
2014年物流工作总结
2014/11/25 职场文书
投资合作意向书范本
2015/05/08 职场文书
歌剧魅影观后感
2015/06/05 职场文书
中秋联欢会主持词
2015/07/04 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android