方法一:

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. 网页实时聊天之PHP实现websocket

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. 关于 Java 数组的 12 个最佳方法

    1.  声明一个数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c&q ...

  3. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  4. sqlserver如何创建镜像图文教程(转)

    由于工作中需要做SQL的镜像异地备份,以前都没有研究过,百度了一个文章记录下,方便以后查询 转载地址:http://jingyan.baidu.com/article/d5c4b52b20843fda ...

  5. day1学习

    python 2 和 3 的区别 1.用户输入的命令:python 2 中是raw_input(""):python 3 中是input(""). 2.默认字符 ...

  6. 将Apache手动安装成Windows的服务

    将Apache手动安装成Windows的服务 可以选择在安装Apache时自动将其安装为一个服务.如果选择"for all users",那么Apache将会被安装为服务. 如果选 ...

  7. 水泡动画模拟(Marching Cubes)

    Marching Cubes算法是三维离散数据场中提取等值面的经典算法,其主要应用于医学领域的可视化场景,例如CT扫描和MRI扫描的3D重建等. 算法主要的思想是在三维离散数据场中通过线性插值来逼近等 ...

  8. UVA 10564 Paths through the Hourglass[DP 打印]

    UVA - 10564 Paths through the Hourglass 题意: 要求从第一层走到最下面一层,只能往左下或右下走 问有多少条路径之和刚好等于S? 如果有的话,输出字典序最小的路径 ...

  9. C#调用LUA函数

    using UnityEngine; using System.Collections; using LuaInterface; public class testLUACALL : MonoBeha ...

  10. Golang gzip的压缩和解压

    package src import ( "bytes" "compress/gzip" ) func GzipEncode(in []byte) ([]byt ...