文档章节

JavaScript DOM操作举例 表格

听那水
 听那水
发布于 2015/04/01 22:30
字数 203
阅读 11
收藏 0

HTML:

<!DOCTYPE html>
<html>
<head>
<title>JS createTable</title>
</head>

<body>
</body>
<script>
	var myBody = document.getElementsByTagName("body")[0];
	var myTable = document.createElement("table");
	myTable.border = "1";
	for(var j=0;j<2;j++)
	{
		myTr = document.createElement("tr"); 
		for(var i = 0;i<4;i++)
		{
			myTd = document.createElement("td");
			myTr.appendChild(myTd);
		}
		myTable.appendChild(myTr);
	}
	myBody.appendChild(myTable);
	
	TD = document.getElementsByTagName("td");  
	innerText0_0 = document.createTextNode("姓名"); 
	TD[0].appendChild(innerText0_0);
	innerText0_1 = document.createTextNode("张三"); 
	TD[1].appendChild(innerText0_1); 
	innerText0_2 = document.createTextNode("性别"); 
	TD[2].appendChild(innerText0_2); 
	innerText0_3 = document.createTextNode("男"); 
	TD[3].appendChild(innerText0_3); 
	innerText1_0 = document.createTextNode("籍贯"); 
	TD[4].appendChild(innerText1_0); 
	innerText1_1 = document.createTextNode("山东"); 
	TD[5].appendChild(innerText1_1);
	innerText1_2 = document.createTextNode("籍贯"); 
	TD[6].appendChild(innerText1_2); 
	innerText1_3 = document.createTextNode("山东"); 
	TD[7].appendChild(innerText1_3);  
</script>
</html>


© 著作权归作者所有

共有 人打赏支持
听那水
粉丝 1
博文 9
码字总数 4697
作品 0
青岛
网页/平面设计
私信 提问
深度理解 Virtual DOM

目录: 1 前言 2 技术发展史 3 Virtual DOM 算法 4 Virtual DOM 实现 5 Virtual DOM 树的差异(Diff算法) 6 结语 7 参考链接 1 前言 我会尽量把 Virtual DOM 应用场景、实现思路、算法讲述清...

大灰狼的小绵羊哥哥
2018/11/19
0
0
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0
深度剖析:如何实现一个 Virtual DOM 算法

特别声明:本文转载@Livoras的《深度剖析:如何实现一个 Virtual DOM 算法》一文,如需转载,烦请注明原文出处:https://github.com/livoras/blog/issues/13。 本文会在教你怎么用 行代码实现...

大灰狼的小绵羊哥哥
2018/11/28
0
0
DataTables_修改语言为中文及DOM介绍

效果图片 Data Tables: http://datatables.net/ Version: 1.10.0 Dom说明 定义表格控件在页面的显示顺序。 每个控件元素在数据表都有一个关联的单个字母。 l - 每页显示行数的控件 f - 检索条...

喵王不瞌睡
2015/05/02
0
0
Lab 02. Table Sorter

题目 在给定源代码:source-code.zip的基础上,完成Table sorter。 Table sorter包括JavaScript和一点CSS,能够让原始的html table变得可以分别按照各栏数据值,对各行排序。 效果 在表头任意...

yejq8
2015/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
38分钟前
11
4
Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
3
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部