js动态创建表格方法
window.onload = function(){
var table = document.createElement('table');
table.border = 1;
table.width = '100%';
var tbody = document.createElement('tbody');
table.appendChild(tbody);
//主角登场了 insertRow; 作用是向指定位置插入一行 rows返回表格的所有行 cells返回表格所有单元格 insertCell与insertRow一样 只不过它是向指定位置插入一个单元格。
tbody.insertRow(0);//创建一行
tbody.rows[0].insertCell(0);//创建第一行 第一个单元格
tbody.rows[0].cells[0].appendChild(document.createTextNode('1,1'));//给单元格添加文本
tbody.rows[0].insertCell(1);//创建第一行 第二个单元格
tbody.rows[0].cells[1].appendChild(document.createTextNode('1,2'));
tbody.insertRow(1);
tbody.rows[1].insertCell(0);//创建第二行 第一个单元格
tbody.rows[1].cells[0].appendChild(document.createTextNode('2,1'));
tbody.rows[1].insertCell(1);//创建创建第二行 第二个单元格
tbody.rows[1].cells[1].appendChild(document.createTextNode('2,2'));
tbody.rows[1].insertCell(2);
tbody.rows[1].cells[2].appendChild(document.createTextNode('2,3'));
document.body.appendChild(table);
}
有不对的地方 请大家指正
js动态创建表格方法的更多相关文章
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- js动态创建表格------Day59
刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...
- js动态创建表格
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- js 动态生成表格案例
<1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...
- js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 第84天:jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- javascript动态创建表格:新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
随机推荐
- Django Web开发【2】Django入门
配置开发环境 1.安装Python,我使用的是centos 6.0,python版本为2.6.6 2.安装Django,Django版本为1.3.5 在Django官网下载对应版本之后,解压压缩包,进 ...
- 使用Integer类实现二叉树排序
class BinaryTree { class Node { private Comparable data; private Node left; ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- 如何创建一个简单的struts2程序
如何创建一个简单的Struts2程序 “计应134(实验班) 凌豪” 1.创建一个新的Web项目test(File->new->Web Project) 2.Struts2框架的核心配置文 ...
- 汉化testlink
testlink版本:1.9.13 1.登录testlink后,打开my setting(左上角小人人) 2.Locale 选择chinese,然后点击save 3.over,汉化完毕
- codeforces 631C. Report
题目链接 按题目给出的r, 维护一个递减的数列,然后在末尾补一个0. 比如样例给出的 4 21 2 4 32 31 2 递减的数列就是3 2 0, 操作的时候, 先变[3, 2), 然后变[2, 0) ...
- mysql alter table
准备: create table t(x int,y int); 用法 1: 修改列的数据类 alter table t modify column y nvarchar(32); 用法2: 给表加一 ...
- POJ 3294 Life Forms(后缀数组+二分答案)
[题目链接] http://poj.org/problem?id=3294 [题目大意] 求出在至少在一半字符串中出现的最长子串. 如果有多个符合的答案,请按照字典序输出. [题解] 将所有的字符串通 ...
- 向前辈致敬 strspn
把8位的CHAR型数据分解为:前5位和后3位,这样2^5 = 32个CHAR型数+值就可表示所有的CHAR型数据 这样做的好处:在给出子串后,不用比较256次,最多比较32次即可判断出是否一个数在子串 ...
- ios 设备用jquery live绑定 click 事件不管用
问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用 解决办法:1.直接在标签写onclick事件 2.给需要绑定的标签添加css样式{cursor:pointe ...