方法一:

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. 使用Docker快速部署Storm环境

    Storm的部署虽然不是特别麻烦,但是在生产环境中,为了提高部署效率,方便管理维护,使用Docker来统一管理部署是一个不错的选择.下面是我开源的一个新的项目,一个配置好了storm与mono环境的D ...

  2. 深入理解Thread.sleep的含义

    转载一篇对sleep说的非常好的一篇文章,原文http://www.cnblogs.com/ILove/archive/2008/04/07/1140419.html 我们可能经常会用到 Thread ...

  3. Linux下使用 Memory Analyzer

    一. 安装Memory Analyzer Tool 打开eclipse >> Help >> Install New Software >> 点击Work With ...

  4. 【java开发】数组基本学习

    一维数组 定义:具有相同数据类型的一组数据. 声明:int []a=new int[3];    释义:该数组的数据类型为int型,该数组长度为3,有3个元素 可采用如下方式为元素赋值:a[0]=1; ...

  5. 令人崩溃的@requestBody乱码一例

    这个问题真是让我心力憔悴了...在客户现场对接就是乱码,StringHttpConverter怎么配置都不行... 场景其实很简单:客户那头post一个http请求,包体是json字符串,我这头spr ...

  6. BZOJ 2120 数颜色&2453 维护队列 [带修改的莫队算法]【学习笔记】

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MBSubmit: 3665  Solved: 1422[Submit][Status][Discuss] ...

  7. iis上如何架设HTTPS网站

    对于HTTPS网站,大部分都比较陌生,觉得很难,其实只要申请好证书,只要在服务器上做下小配置就可以完成 首先,申请一个ssl证书 免费申请https://buy.wosign.com/free/Fre ...

  8. javaScript中的页面传值

    function getURIParam(name) { var search = window.location.search; search = search.substring(1); if ( ...

  9. 再谈Newtonsoft.Json高级用法

    上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...

  10. learn mips

    可以使用MARS来编汇编,MARS是一个用java编的IDE,它是一个模拟环境. 样例:重要的句子输出三遍 .data str: .asciiz "weidiao is great\n&qu ...