制作动态表格的主要是运用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. 纸上谈兵:左倾堆(leftist heap)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们之前讲解了堆(heap)的概念.堆是一个优先队列.每次从堆中取出的元素都是堆中 ...

  2. 2016-08-16: copy-and-swap

    #include <algorithm> // std::copy #include <cstddef> // std::size_t #include <stdio.h ...

  3. vs2013_arcgis_developer_kit_101_install

    1.修改注册表以安装AE101 在注册表中HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\10.0增加类型为REG_SZ的 ...

  4. go特性学习

    而后我写了一些测试代码: dept1 :=     Dept{         name:     "MySohu",         building: "Intern ...

  5. angular背景图片问题

    如果背景图片是从后台取得的数据,可以按下面的方式使用: ng-style="{'background':'url(http://xxx/{{item.id}})'}" 还需要加上  ...

  6. NHibernate系列文章四:NHibernate运行时监控

    摘要 有三种方式可以实现NHibernate运行时监控,监控的信息包括:执行了的SQL语句.NHibernate执行过程.数据库性能分析.这对我们学习NHibernate有很大的帮助,在工作中也能快速 ...

  7. Study Emgu VoteForUniqueness

    Recently i was studying Emgu, but find there is a bug in the VoteForUniqueness function in class Fea ...

  8. pt-query-digest查询日志分析工具

    1.工具介绍 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcp ...

  9. mysql问题小结

    1.数据表存在,但查询时提示不存在 原因:默认情况下,mysql在windows对表名大小不敏感(lower_case_table_names=1),在linux上大小敏感(lower_case_ta ...

  10. WinExec

    WinAPI: WinExec - 运行外部程序 //声明 WinExec(   lpCmdLine: LPCSTR; {文件名和参数; 如没指定路径会按以下顺序查找: 程序目录/当前目录/Syste ...