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 相关文章推荐
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue实现分页栏效果
Jun 28 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP反射API示例分享
2016/10/08 PHP
javascript hashtable实现代码
2009/10/13 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python自定义一个异常类的方法
2019/06/27 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
求职信模版
2013/11/30 职场文书
优秀学生事迹材料
2014/02/08 职场文书
师范生自我鉴定
2014/03/20 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers