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 撑出页面文字换行
Jun 15 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 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下使用strpos需要注意 === 运算符
2010/07/17 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
python实现RSA加密(解密)算法
2016/02/17 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python 从相对路径下import的方法
2018/12/04 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
工作中个人的自我评价
2013/12/31 职场文书
八年级数学教学反思
2014/01/31 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
项目合作协议书
2014/04/16 职场文书
安全生产月标语
2014/10/07 职场文书
入股协议书范本
2014/11/01 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python