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> < ...
随机推荐
- windows下scrapy 的安装
2016-07-18 20:27:53 安装python 根据你的需求下载python安装包,安装python(本文基于python27)https://www.python.org/downloa ...
- boost compile
pushd E:\boost\boost_1_59_0 b2 stage --toolset=msvc-12.0 --without-python --stagedir="E:\boost\ ...
- Android开发--微信布局(ListView)基本运用
ListView 1.ListVeiw 用来展示列表的View. 2.适配器 用来把数据映射到ListView上的中介. 3.数据 具体的将被映射的字符串,图片,或者基本组件. 根据列表的适配器 ...
- projecteuler Problem 8 Largest product in a series
The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × 8 × 9 = ...
- ajax分页
html显示 <center> <div id="fyh"> <ul class="pagination" id="fy ...
- 查看某个线程占得CPU高
jps得到pid pidstat -p [pid] -t 1 5 -t表示显示该进程里面所有的线程的信息 06:20:32 PM TGID TID %usr ...
- 编程范式 episode3 and 4,5
episode 3 --storage structure. ampersand operate with asterisk --library function episode 4 --generi ...
- C++基于TCP和UDP的socket通信
以下是关于socket编程的一个非常经典的例子: 服务端: #include <stdio.h> #include <Winsock2.h> //windows socket的 ...
- HTML 透明、阴影,圆角等知识点
table两个属性:cellpadding:内容与单元格边框的距离,内部距离cellspacing:单元格之间的距离,外部距离 table合并边框线: border-collapse: co ...
- console.log的应用
这两天在学javascript,但是有个问题老是觉得很疑惑,那就是这两个表达式到底有啥区别,虽然结果输出都差不多,但是我想这个两个表达式被开发出来,肯定是有意义的吧!哪位高手解答下吧!Thanks i ...