添加删除表格append或 createElement
2016-06-06 12:02
183 查看
方法一:
js代码:增加一行五列的表格
方法二:
js代码:增加一行五列的表格
function AddList(){ $len= document.getElementsByName('goods_name[]').length; obj = document.getElementById('tab_g'); $str1 = '1'; $str2 = '2'; $str3 = '3'; $str4 = '4'; $str5 = '5'; newTr = document.createElement('tr'); newTr.id = 'List_'+$len; newTd1 = document.createElement('td'); newTd2 = document.createElement('td'); newTd3 = document.createElement('td'); newTd4 = document.createElement('td'); newTd5 = document.createElement('td'); newTd1.innerHTML = $str1; newTd2.innerHTML = $str2; newTd3.innerHTML = $str3; newTd4.innerHTML = $str4; newTd5.innerHTML = $str5; newTr.appendChild(newTd1); newTr.appendChild(newTd2); newTr.appendChild(newTd3); newTr.appendChild(newTd4); newTr.appendChild(newTd5); document.getElementById('tab_g').appendChild(newTr) }
方法二:
<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>
相关文章推荐
- Html5实现移动端、PC端 刮刮卡效果
- 微信开放平台开发——网页微信扫码登录(OAuth2.0)
- Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)
- android 自定义Dialog去除黑色背景
- Xcode使用介绍之一:Xcode简介+创建App应用
- 小小站长成长记(3)--微信个人订阅号鸡肋之痛
- Android Studio 学习笔记 - 开发环境的架设
- Error ITMS-90635 invalid Mach-o format. the mach-o in hundle “*** ***.app/Frameworks/Result.framewor
- Android 事件分发细说
- android studio 更改背景和设置字体大小
- 用Android studio创建Cocos2d-x 3.X项目
- Unity_二维纹理 Texture 2D_4_总结细节
- 二维码登陆
- Android 崩溃日志 本地存储 与 远程保存
- Android自定义PopupWindow显示在控件上方或者下方
- Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7)
- 【Android基础知识】ContentProvider(二)自定义ContentProvider和URI
- 嘿!让我们来手动编译安卓项目吧
- 微信 js api[转]
- iostat