5.11-5.15javascript制作动态表格
制作动态表格的主要是运用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)' /> <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制作动态表格的更多相关文章
- vue:使用element-ui制作动态表格
参考; https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/dynamic-table/compon ...
- ppt制作动态表格与文字
在工作中经常与ppt打交道的小伙伴们,是不是非常想让自己做的ppt图表能够动起来,显得高大上一点呢?比如让柱形图慢慢长起来,让折线图慢慢画出来,让文字像字幕一样缓缓上升?本文将给大家整理几 ...
- Xcode 6制作动态及静态Framework
技术交流新QQ群:414971585 有没有写SDK或者要将一些常用的工具类做成Framework的经历? 你或许自己写脚本完成了这项工作,相信也有很多的人使用 iOS-Universal-Frame ...
- Xcode 6制作动态及静态Framework和各种坑
Xcode 6制作动态及静态Framework http://www.cocoachina.com/ios/20141126/10322.html 有没有写SDK或者要将一些常用的工具类做成Frame ...
- 【转】Xcode 6制作动态及静态Framework
http://years.im/Home/Article/detail/id/52.html 创建iOS动态库 新建工程并选择默认Target为Cocoa Touch Framework, 如图: 做 ...
- jQuery动态表格插件 AppendGrid
AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...
- 查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来
建立动态表格,使用ajax将前台查询条件传给后台,并将查询结果以表格的形式展示出来. 页面的展示效果如下图所示: 第一步:查询条件的部分: 代码如下: <div class="text ...
- JavaScript实现动态表格
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
随机推荐
- set JAVA_HOME in RHEL/CentOS
3.3. Install OpenJDK on Red Hat Enterprise Linux Introduction OpenJDK is one of many Java Developmen ...
- EBS密码安全的几个参数
PROFILE Name 1.Signon Password Failure Limit 输入错误次数限制,一旦被锁定需要系统管理员重置解锁 除了后台表系统中没有的地方可以体现被锁定的现象 此功能使用 ...
- spring security method security
参考 Spring Security 官方文档 http://www.concretepage.com/spring/spring-security/preauthorize-postauthoriz ...
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 创建一个swift项目
笔者认为你已经有了oc的开发基础,流程是一样的,选择开发语言为swift即可.这里主要说明一下一些常用的配置: 一般我们不使用XIB和storyboard,所以在系统自动创建的文件中删除main.st ...
- TListView的一些操作
1,让滚动条滚动的API SetScrollPos int SetScrollPos( _In_ HWND hWnd, _In_ int nBar, _In_ int n ...
- codevs4919 线段树练习4
4919 线段树练习4 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 给你N个数,有两种操作 1:给区间[a,b]内的所有数都增加X 2:询问区 ...
- Linux程序包管理初步-yum的使用
何为yum? yum:由yellow dog研发,全称Yellowdog Update Modifier 是rhel系列系统上rpm包管理器的前端工具,可用来自动解决依赖关系,从而更好的实现程序包的安 ...
- MATLAB - 运算符
1.关系运算符用来比较两个数之间的大小关系,在Matlab中的关系运算符包括: < 小于 <= 小于或等于 > 大于 >= 大于或等于 == ...
- C# DataSet和DataTable详解
1.C# DataSet和DataTable详解:http://www.cnblogs.com/top5/archive/2009/04/23/1441765.html 2.DataSet和DataT ...