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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
JavaScript中null与undefined分析
Jul 25 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
React实现全选功能
2020/08/25 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
《放飞蜻蜓》教学反思
2014/04/27 职场文书
公司授权委托书范本
2014/09/18 职场文书
Python+Appium新手教程
2021/04/17 Python
MySQL Shell的介绍以及安装
2021/04/24 MySQL