方法一:

js代码:增加一行五列的表格

  1. function AddList(){
      $len= document.getElementsByName('goods_name[]').length;
  2. obj = document.getElementById('tab_g');
  3.  
  4. $str1 = '';
  5. $str2 = '';
  6. $str3 = '';
  7. $str4 = '';
  8. $str5 = '';
  9.  
  10. newTr = document.createElement('tr');
      newTr.id = 'List_'+$len;
  11. newTd1 = document.createElement('td');
  12. newTd2 = document.createElement('td');
  13. newTd3 = document.createElement('td');
  14. newTd4 = document.createElement('td');
  15. newTd5 = document.createElement('td');
  16.  
  17. newTd1.innerHTML = $str1;
  18. newTd2.innerHTML = $str2;
  19. newTd3.innerHTML = $str3;
  20. newTd4.innerHTML = $str4;
  21. newTd5.innerHTML = $str5;
  22.  
  23. newTr.appendChild(newTd1);
  24. newTr.appendChild(newTd2);
  25. newTr.appendChild(newTd3);
  26. newTr.appendChild(newTd4);
  27. newTr.appendChild(newTd5);
  28.  
  29. document.getElementById('tab_g').appendChild(newTr)
  30. }

方法二:

  1. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  2. <script>
  3. $(function(){
  4. $("#getAtr").click(function(){
  5. $str='';
  6. $str+="<tr align='center'>";
  7. $str+="<td><input type='text' name='advTitle[]'/></td>";
  8. $str+="<td><input type='file' name='img[]' /></td>";
  9. $str+="<td><input type='text' name='advContent[]' /></td>";
  10. $str+="<td><input type='text' name='advSource[]' /></td>";
  11. $str+="<td><input type='text' name='advAuthor[]' /></td>";
  12. $str+="<td><input type='text' name='advPosition[]' /></td>";
  13. $str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";
  14. $str+="</tr>";
  15. $("#addTr").append($str);
  16. });
  17. });
  18.  
  19. function getDel(k){
  20. $(k).parent().remove();
  21. }
  22. </script>
  23.  
  24. --------------------------------------------------------------------------------
  25. html部分
  26. <table align="center" border="" cellpadding="" cellspacing="" width="100%">
  27. <tr align="center">
  28. <td>广告名称</td>
  29. <td>广告图片</td>
  30. <td>广告内容</td>
  31. <td>广告来源</td>
  32. <td>广告作者</td>
  33. <td>广告描述</td>
  34. <td align="center"><a href="#" id="getAtr">追加内容</a></td>
  35. </tr>
  36. <tbody id="addTr">
  37. <tr align="center">
  38. <td><input type="text" name="advTitle[]"/></td>
  39. <td><input type="file" name="img[]" /></td>
  40. <td><input type="text" name="advContent[]" /></td>
  41. <td><input type="text" name="advSource[]" /></td>
  42. <td><input type="text" name="advAuthor[]" /></td>
  43. <td><input type="text" name="advPosition[]" /></td>
  44. <td></td>
  45. </tr>
  46. </tbody>
  47. <tr align="center">
  48. <td colspan=""><input type="submit" value="全部添加" /></td>
  49. </tr>
  50. </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. charles 抓取eclipse中的请求

    charles抓取eclipse中的请求 有时候,想要监测eclipse中发送get获取post请求,一样可以使用代理方式: 1.eclipse代码设置 代码中添加,可以就写在主函数中,然后再调用请求 ...

  2. 云计算与 OpenStack - 每天5分钟玩转 OpenStack(14)

    “云计算” 算是近年来最热的词了.现在 IT 行业见面不说这三个字您都不好意思跟人家打招呼. 对于云计算,学术界有各种定义,大家有兴趣可以百度一下. CloudMan 这里主要想从技术的角度谈谈对云计 ...

  3. 【C++】输入多行数字到数组

    前天做某公司笔试题的时候,其输入格式是多行数字,每行以空格为分隔符,以换行符号为结束输入到多个数组.在JAVA中有相应的函数直接将一行拆成数组,感觉在C++中这中输入方式还是挺奇怪的,今天想出一种解决 ...

  4. Window10可用的转串口驱动CH340

    下载地址:http://pan.baidu.com/s/1cvCNtO

  5. [bootsrap]模态框使用例

    <a href="#modal1" role="button" class="btn btn-primary btn-sm" data ...

  6. 【小白的CFD之旅】11 敲门实例【续】

    主要内容: 接上文[小白的CFD之旅]10 敲门实例 2.4 Materials设置2.5 Cell Zone Conditions2.6 Boundary Conditons2.7 Dynamic ...

  7. Neutron 理解(5):Neutron 是如何向 Nova 虚机分配固定IP地址的 (How Neutron Allocates Fixed IPs to Nova Instance)

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  8. 一道算法题目, 二行代码, Binary Tree

    June 8, 2015 我最喜欢的一道算法题目, 二行代码. 编程序需要很强的逻辑思维, 多问几个为什么, 可不可以简化.想一想, 二行代码, 五分钟就可以搞定; 2015年网上大家热议的 Home ...

  9. Java并发编程:Lock

    原文出处: 海子 在上一篇文章中我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包 ...

  10. Spring BeanUtils 的对象复制 copyProperties

    Spring提供了一个非常棒的对象复制方法, 其参数的顺序和apache commons提供的同名方法是不一样的, 这个要小心. 源码 public static void copyPropertie ...