js动态创建表格------Day59
刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下。发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了...
前几天记录了动态的加入一行一列:insertRow()和insertCell();动态的删除一行一列:deleteRow()和deleteCell();选中一行:this的參数传递,这些都是实现的关键,可是这一切都建立在一个基础上:那就是存在一个表格。今天就来记录下动态建立表格的方法:
其实在刚開始的时候。我仅仅想到了一个方法,尽管到最后发现这种方法确实还是比較简单的,就像是动态加入行和列一样,整合起来不就是一个表格了么:
来看一下编写的代码,同一时候还发现了它的生成方式:(这里在html页面上留了一个tableTest的div)
1 window.onload=function createTable1() {
2 var table = document.createElement('table');
3 for (var i = 0; i < 4; i++) {
4 var row = table.insertRow();
5 for (var j = 0; j < 2; j++) {
6 var cell = row.insertCell();
7 cell.innerHTML = "这里是"+i +"行" +',' + j+"列";
8 }
9 }
10 document.getElementById('tableTest').appendChild(table);
11 table.setAttribute('border', '1');
12 }
这样来看一下生成的效果:
这里可看到了吧,他是从下向上生成的行,从右向左生成的列。也就意味着。插入一行之后。再进行插入的话,是在其上方插入行,在左边插入列,后来从网上搜索了之后,原来还有好多方法,当然各种应用各有千秋。这里简单写一下其他两种方式:
1、生成元素
看代码的生成步骤:
1 window.onload=function createTable2() {
2 var table = document.createElement('table');
3 var tbody = document.createElement('tbody');
4 for (var i = 0; i < 4; i++) {
5 var tr = document.createElement('tr');
6 for (var j = 0; j < 2; j++) {
7 var td = document.createElement('td');
8 var inner = document.createTextNode("这个是"+i +"行"+ ',' + j+"列");
9 td.appendChild(inner);
10 tr.appendChild(td);
11 }
12 tbody.appendChild(tr);
13 }
14 table.appendChild(tbody);
15 document.getElementById('tableTest').appendChild(table);
16 table.setAttribute('border', '1');
17 }
这样再来看一下效果的话:
这个就是从上到下,从左到右的生成了吧。这个的话尽管理解上简单,可是写法上也比較麻烦呢。
2、数组编辑(拼接html语言)
看代码的实现步骤:
1 window.onload= function createTable4() {
2 var arr = new Array();
3 arr.push('<table border=1><tbody>');
4 for (var i = 0; i < 4; i++) {
5 arr.push('<tr>');
6 for (var j = 0; j < 3; j++) {
7 arr.push('<td>' +"这里是"+ i +"行"+ ',' + j +"列"+ '</td>');
8 }
9 arr.push('</tr>');
10 }
11 arr.push('</tbody><table>');
12
13 document.getElementById('tableTest').innerHTML = arr.join('');
14 }
这时候来看效果的话:
这个理解起来就更简单了,就算是把Array改成字符串拼接的话。我们可能理解的更清晰些,就跟在html语言里面加入一样吧,这样写起来最easy理解,可是确实有些啰嗦了。
其实看到代码的时候。确实自己就能明确该怎样是怎么实现的加入。可是最開始想到动态加入的时候,却仅仅想到了近期在研究的方法,就有点不周全了。今天開始补牙。还是有点害怕补牙啊,感觉好恐怖....
这花了三分钟再把博客园上写好的转到这里来,是一种执念么,还是一种矫情。哎,睡觉。天有些晚了...
js动态创建表格------Day59的更多相关文章
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- js动态创建表格
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- js动态创建表格方法
window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...
- js 动态生成表格案例
<1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...
- js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- 第84天:jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- javascript动态创建表格:新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
随机推荐
- MySql c#通用类 转
using System;using System.Data;using System.Configuration;using System.Collections.Generic;using Sys ...
- less 安装和webstorm的使用
1.less 的安装 npm install -g less 2.less安装成功 3.less安装成功后,在webstorm中进行配置.file——>settings:弹出settings框, ...
- Apache安装简述
软件下载地址:http://pan.baidu.com/s/1o8oexKI 1.httpd -k install 2.httpd -k restart 3.启动bin文件夹里的httpd.exe 4 ...
- 数据库 'tempdb' 的事务日志已满。若要查明无法重用日志中的空间的原因
最常的做法: --1.清空日志 DUMP TRANSACTION tempdb WITH NO_LOG --2.截断事务日志: BACKUP LOG tempdb WITH NO_LOG --3.收缩 ...
- oracle从入门到精通复习笔记
为方便大家跟着我的笔记练习,为此提供数据库表文件给大家下载:点我下载 描述一个表用 desc employees过滤重复的部门 select distinct department_id from e ...
- .NET 在序列化时使用全小写的属性名
基于某些奇怪的需求,需要将一些对象序列化后输出,而且属性名又必须为小写形式. 解决过程 说到在 .NET 平台上序列化操作,那么第一个想到的应该就是 Json.NET 家的 Newtonsoft.Js ...
- (转)Jetty实战之 安装 运行 部署
http://blog.csdn.net/kongxx/article/details/7218767 本文地址:http://blog.csdn.NET/kongxx/article/details ...
- mac 上执行 rm -rf /
# 很可怕的指令,清空磁盘所有资料,千万不要用 sudo 尝试,吓的小心肝差掉跳出来 rm -rf / 无聊,想执行rm -rf /会怎样,想起没加sudo时对~/download执行提示权限不足,被 ...
- Git 从github克隆文件至本地
学习阶段,同一个项目,如何保障家与公司的代码同步的问题,可以使用git克隆来解决 在家将项目提交到了GitHub上,现在来到公司,需要将GitHub上的项目克隆到本地,那么对于公司的电脑来说,同样需要 ...
- .NET 解决方案 核心库整理
一系列令人敬畏的.NET核心库,工具,框架和软件: https://www.cnblogs.com/weifeng123/p/11039345.html 企业级解决方案收录: https://www ...