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代码
Mar 16 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
jQuery.each()用法分享
Jul 31 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
关于vue组件事件属性穿透详解
Oct 28 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版(3)
2006/10/09 PHP
谈谈PHP语法(5)
2006/10/09 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
php接口隔离原则实例分析
2019/11/11 PHP
PHP7 新增功能
2021/03/09 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
在Django框架中设置语言偏好的教程
2015/07/27 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
法国家具及室内配件店:home24
2017/01/21 全球购物
电台实习生求职信
2014/02/25 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
环卫工作汇报材料
2014/10/28 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
在pyCharm中下载第三方库的方法
2021/04/18 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang