添加删除表格append或 createElement
方法一:
js代码:增加一行五列的表格
- function AddList(){
$len= document.getElementsByName('goods_name[]').length;- obj = document.getElementById('tab_g');
- $str1 = '';
- $str2 = '';
- $str3 = '';
- $str4 = '';
- $str5 = '';
- 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="" cellpadding="" cellspacing="" 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=""><input type="submit" value="全部添加" /></td>
- </tr>
- </table>
添加删除表格append或 createElement的更多相关文章
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- 数据字典的设计--3.首页添加删除表格(JS实现)
页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 添加删除表格(js完成)【自己实际项目】
// 通过dom对象完成 注释掉了 /** function insertRows(){ var tempRow=0; var tbl=document.getElementById("di ...
- ASP.NET+ashx+jQuery动态添加删除表格
aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...
- 点滴积累【JS】---JS小功能(操作Table--动态添加删除表格及数据)
效果: 代码: <head runat="server"> <title></title> <style type="text/ ...
- 动态插入、添加删除表格行的JS代码
<html> <head> <title>Table对象的方法</title> <script language="JavaScript ...
- 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- JavaScript DOM方法表格添加删除
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- charles 抓取eclipse中的请求
charles抓取eclipse中的请求 有时候,想要监测eclipse中发送get获取post请求,一样可以使用代理方式: 1.eclipse代码设置 代码中添加,可以就写在主函数中,然后再调用请求 ...
- 云计算与 OpenStack - 每天5分钟玩转 OpenStack(14)
“云计算” 算是近年来最热的词了.现在 IT 行业见面不说这三个字您都不好意思跟人家打招呼. 对于云计算,学术界有各种定义,大家有兴趣可以百度一下. CloudMan 这里主要想从技术的角度谈谈对云计 ...
- 【C++】输入多行数字到数组
前天做某公司笔试题的时候,其输入格式是多行数字,每行以空格为分隔符,以换行符号为结束输入到多个数组.在JAVA中有相应的函数直接将一行拆成数组,感觉在C++中这中输入方式还是挺奇怪的,今天想出一种解决 ...
- Window10可用的转串口驱动CH340
下载地址:http://pan.baidu.com/s/1cvCNtO
- [bootsrap]模态框使用例
<a href="#modal1" role="button" class="btn btn-primary btn-sm" data ...
- 【小白的CFD之旅】11 敲门实例【续】
主要内容: 接上文[小白的CFD之旅]10 敲门实例 2.4 Materials设置2.5 Cell Zone Conditions2.6 Boundary Conditons2.7 Dynamic ...
- Neutron 理解(5):Neutron 是如何向 Nova 虚机分配固定IP地址的 (How Neutron Allocates Fixed IPs to Nova Instance)
学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...
- 一道算法题目, 二行代码, Binary Tree
June 8, 2015 我最喜欢的一道算法题目, 二行代码. 编程序需要很强的逻辑思维, 多问几个为什么, 可不可以简化.想一想, 二行代码, 五分钟就可以搞定; 2015年网上大家热议的 Home ...
- Java并发编程:Lock
原文出处: 海子 在上一篇文章中我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包 ...
- Spring BeanUtils 的对象复制 copyProperties
Spring提供了一个非常棒的对象复制方法, 其参数的顺序和apache commons提供的同名方法是不一样的, 这个要小心. 源码 public static void copyPropertie ...