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 ...
随机推荐
- Android ActionBar详解(一)--->显示和隐藏ActionBar
MainActivity如下: package cc.testsimpleactionbar0; import android.os.Bundle; import android.view.View; ...
- Ubuntu14.04 64bit安装Android-Studio
用PPA安装Android-Studio炒鸡简单,墙内亲测可用,就是速度慢了点.(睡觉时开着电脑装-) 安装Android-Studio 打开Terminal,执行: sudo add-apt-rep ...
- JS笔记 入门第二
输出内容 document.write(); alert("hello!"); alert(mynum); </script> 注:alert弹出消息对话框(包含一个确 ...
- [转]printf 函数实现的深入剖析
研究printf的实现,首先来看看printf函数的函数体 int printf(const char *fmt, ...) { int i; char buf[256]; va_l ...
- JS 节流阀
JS 节流阀 参考 https://github.com/hahnzhu/read-code-per-day/issues/5 节流阀 节流阀的基本原理 事件函数的执行都记下当前时间, 只有当前时间与 ...
- oracle 两表数据对比---minus
1 引言 在程序设计的过程中,往往会遇到两个记录集的比较.如华东电网PMS接口中实现传递一天中变更(新增.修改.删除)的数据.实现的方式有多种,如编程存储过程返回游标,在存储过程中对两批数据进 ...
- mysqli 启动出错
innodb_buffer_pool_size = 512M 配置问题 /usr/local/mysql/bin/mysqld_safe --relay-log nor --relay-log-in ...
- iPhone 5s网络钓鱼邮件,和苹果发布会同步亮相
正如预期的一样,网络犯罪分子会利用Apple最新发表的iPhone 5s消息,几乎在苹果的新产品发表会同时,这个网络钓鱼(Phishing)信件开始流传.此次,趋势科技病毒防治中心 Trend Lab ...
- POJ 1721 CARDS(置换群)
[题目链接] http://poj.org/problem?id=1721 [题目大意] 给出a[i]=a[a[i]]变换s次后的序列,求原序列 [题解] 置换存在循环节,因此我们先求出循环节长度,置 ...
- 那些年我们写过的三重循环----CodeForces 295B Greg and Graph 重温Floyd算法
Greg and Graph time limit per test 3 seconds memory limit per test 256 megabytes input standard inpu ...