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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
微信小程序实现星级评价
Nov 20 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
深入了解python列表(LIST)
2020/06/08 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
李开复演讲稿
2014/05/24 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
2014年中秋寄语
2014/08/11 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
婚礼新人答谢词
2015/01/04 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python