方法一:

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的更多相关文章

  1. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  2. 数据字典的设计--3.首页添加删除表格(JS实现)

    页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...

  3. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 添加删除表格(js完成)【自己实际项目】

    // 通过dom对象完成 注释掉了 /** function insertRows(){ var tempRow=0; var tbl=document.getElementById("di ...

  5. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  6. 点滴积累【JS】---JS小功能(操作Table--动态添加删除表格及数据)

    效果: 代码: <head runat="server"> <title></title> <style type="text/ ...

  7. 动态插入、添加删除表格行的JS代码

    <html> <head> <title>Table对象的方法</title> <script language="JavaScript ...

  8. 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  9. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. java实现REST方式的webService

    一. 简介 WebService有两种方式,一是SOAP方式,二是REST方式.SOAP是基于XML的交互,WSDL也是一个XML文档, 可以使用WSDL作为SOAP的描述文件:REST是基于HTTP ...

  2. Android 通过 Intent 传递类对象或list对象

    (转:http://www.cnblogs.com/shaocm/archive/2013/01/08/2851248.html) Android中Intent传递类对象提供了两种方式一种是 通过实现 ...

  3. JAVA JVM虚拟机选项:Xms Xmx PermSize MaxPermSize 区别

    Xms : 是指设定程序启动时占用内存大小.一般该值设置大的会使程序启动快,但是可能会使本机暂时变慢. Xmx : 是指设定程序运行期间最大可占用的内存大小,如果程序运行需要占用更多的内存,超出这个 ...

  4. 数据处理之PostgreSQL过程语言学习

    前段时间,公司更换新的PostgreSQL数据集市的系统过程中,自己下载了postgresqlAPI的pdf文件研究了一下PostgreSQL数据集市.发现使用PostgreSQL过程语言可以大大加快 ...

  5. Java Generics and Collections-2.2

    2.2 Wildcards with extends 前面介绍过List<Integer>不是List<Number>的子类,即前者不能替换后者, java使用? extend ...

  6. JustWeTools - 自定义控件集

    JustWeTools - Some useful tools 项目地址 JustWe 现在有哪些模块? View自定义控件 PaintView画图工具(包含重构压感新版) CodeView代码编辑 ...

  7. Leetcode: plus one

    June 22, 2015 Given a number represented as an array of digits, plus one to the number. Leetcode: pl ...

  8. Apache Hama安装部署

    安装Hama之前,应该首先确保系统中已经安装了hadoop,本集群使用的版本为hadoop-2.3.0 一.下载及解压Hama文件 下载地址:http://www.apache.org/dyn/clo ...

  9. Struts2文件上传和文件下载

    一.单个文件上传 文件上传需要两个jar包: 首先制作一个简单的页面,用于实现文件上传 <h1>单个文件上传</h1> <s:form action="uplo ...

  10. 搭建一套自己实用的.net架构(2)【日志模块-log4net】

    先谈谈简单的模块,日志.在系统中日志模块是必须的,什么系统日志,操作日志,调试日志.这里用的是log4net. 对log4net还不熟悉的小伙伴们赶快去搜索基础教程哦, 我这里就不温故了. 那么有人要 ...