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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 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批量生成缩略图的代码
2008/07/19 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
探讨如何把session存入数据库
2013/06/07 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python实现感知机模型的示例
2020/09/30 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
村级换届选举方案
2014/05/10 职场文书
建筑工地标语
2014/06/18 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
孟佩杰观后感
2015/06/17 职场文书
军训新闻稿范文
2015/07/17 职场文书