制作动态表格的主要是运用js中表格类的insertRow、insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,
每行的编号为rows.length-1,增加的表格内的标签属性内容注意把原来的双引号变为单引号: <script language="javascript" type="text/javascript">
var id = 5;
function addtr(){ //增加表格
var tem = ++id;
var t = document.getElementById("tab");
var row = t.insertRow(t.rows.length-1);
row.bgColor="#CCCCCC";
row.id="row"+tem;
var cell1 = row.insertCell(0);
cell1.bgColor="#DFF1F8";
var cell2 = row.insertCell(1);
cell2.bgColor="#f0f0f0";
var cell3 = row.insertCell(2);
cell3.bgColor="#DFF1F8";
var cell4 = row.insertCell(3);
cell4.bgColor="#f0f0f0";
cell1.innerHTML="产品编号:";
cell2.innerHTML="<input type='text' name='code"+tem+"' id='code"+tem+"' onchange='prodcheck(this.id)'/>";
cell3.innerHTML="数 量:";
cell4.innerHTML="<input type='text' name='num"+tem+"' id='num"+tem+"' onchange='isNumber(this.id)' />&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:deltr()'>删除</a>";
document.f.hid.value=id;
} function deltr(){ //删除表格
var tdel = document.getElementById("tab");
tdel.deleteRow(id+2);
id--;
document.f.hid.value=id;
}
</script>、 在删除表格时,注意每行id属性的变化,需要改变id值。

5.11-5.15javascript制作动态表格的更多相关文章

  1. vue:使用element-ui制作动态表格

    参考; https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/dynamic-table/compon ...

  2. ppt制作动态表格与文字

          在工作中经常与ppt打交道的小伙伴们,是不是非常想让自己做的ppt图表能够动起来,显得高大上一点呢?比如让柱形图慢慢长起来,让折线图慢慢画出来,让文字像字幕一样缓缓上升?本文将给大家整理几 ...

  3. Xcode 6制作动态及静态Framework

    技术交流新QQ群:414971585 有没有写SDK或者要将一些常用的工具类做成Framework的经历? 你或许自己写脚本完成了这项工作,相信也有很多的人使用 iOS-Universal-Frame ...

  4. Xcode 6制作动态及静态Framework和各种坑

    Xcode 6制作动态及静态Framework http://www.cocoachina.com/ios/20141126/10322.html 有没有写SDK或者要将一些常用的工具类做成Frame ...

  5. 【转】Xcode 6制作动态及静态Framework

    http://years.im/Home/Article/detail/id/52.html 创建iOS动态库 新建工程并选择默认Target为Cocoa Touch Framework, 如图: 做 ...

  6. jQuery动态表格插件 AppendGrid

    AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...

  7. 查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来

    建立动态表格,使用ajax将前台查询条件传给后台,并将查询结果以表格的形式展示出来. 页面的展示效果如下图所示: 第一步:查询条件的部分: 代码如下: <div class="text ...

  8. JavaScript实现动态表格

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  9. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

随机推荐

  1. 解决eclipse+git中每次clean项目需要重新commit文件

    使用.gitignore文件避免每次clean项目需要重新commit文件(XX.xcodeproj/project.xcworkspace/xcuserdata/XX.xcuserdatad/Use ...

  2. spring定时器设置(转自:http://my.oschina.net/LvSantorini/blog/520049)

    转自:http://my.oschina.net/LvSantorini/blog/520049<!-- MessageRequestTask类中包含了msgRequest方法,用于执行定时任务 ...

  3. Action<T1, T2>委托

    封装包含两个参数的方法委托,没有返回值. 语法 public delegate void Action<in T1, in T2>( T1 arg1, T2 arg2 ) 类型参数 in ...

  4. STL之分配器allocator

    简单介绍下STL中的分配器allocators. allocators我们一般不会直接接触到,甚至可能并不清楚它的存在,简单的来说,它就是一个幕后工作者,我的印象中它的作用主要在于为容器分配一定的空间 ...

  5. 8,SFDC 管理员篇 - 数据模型 - 公式和验证 2

    1, Checkbox 只接受真值或者假值 And(arg1, arg2....)至少两个参数,只有参数都为真时候,才返回真,只要有一个为假,就都为假 例如:AND(DoNotCall, HasOpt ...

  6. window.parent

    今天出现了一个严重的bug,页面在载入时居然导致了页面崩溃,找了近5个小时的代码,才找到了原因(擦,我只能说我水平有限,浪费了太长时间了~). 源代码: var curr = window; whil ...

  7. 浅析Linux下的/etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc文件

    转自:http://www.ahlinux.com/shell/20239.html 0x01 /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行,并从/e ...

  8. PHP递归实现层级树状展现数据

    树状数据展现很常用,今天学习了PHP的递归,也来总结总结! PHP代码: function _getTreeList_custom1($data,$parent_id,$depth) { $retur ...

  9. Firefox 23中的新特性(新陷阱)

    话说有一天突然发现我们的网站页面上的JQuery功能都失效了,Firebug中显示如下的错误 Blocked loading mixed active content "http://xxx ...

  10. 加密和ssl机制细节

    1.1 背景知识 对称加密:加密解密使用同一密钥,加解密速度快.随着人数增多,密钥数量急增n(n-1)/2 非对称加密:使用公私钥配对加解密,速度慢.公钥是从私钥中提取出来的,一般拿对方公钥加密来保证 ...