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对象和数组
May 25 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
js实现跨域的多种方法
Dec 25 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
vue-ajax小封装实例
Sep 18 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
React Router基础使用
2017/01/17 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
WxPython建立批量录入框窗口
2019/02/27 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
简述数组与指针的区别
2014/01/02 面试题
人力资源专业推荐信
2013/11/29 职场文书
初三开学计划书
2014/04/27 职场文书
红色旅游心得体会
2014/09/03 职场文书
树转促学习心得体会
2014/09/10 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
大学生求职信怎么写
2015/03/19 职场文书
检讨书之工作不认真
2019/08/14 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript