document基本操作 动态脚本-动态样式-创建表格
var html = document.documentElement;
var body = document.body; window.onload = function() {
//document.write("Hello world!");
}
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myDiv");
var li = null; for (var i = 0; i < 3; i++) {
li = document.createElement("li");
li.appendChild(document.createTextNode("Item" + (i + 1)));
fragment.appendChild(li);
} ul.appendChild(fragment); //动态创建脚本
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "docment.js";
document.body.appendChild(script); //var attr = document.createAttribute("align");
//动态样式 var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css"; var head = document.getElementsByTagName("head")[0];
head.appendChild(link); //表格
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建行
var row1 = document.createElement("tr");
tbody.appendChild(row1); var cell1 = document.createElement("td"); //创建列
cell1.appendChild(document.createTextNode("cell1 1.1")); //设置列文本内容
row1.appendChild(cell1); //设置列所属行 var cell2 = document.createElement("td");
cell2.appendChild(document.createTextNode("cell2 2.1"));
row1.appendChild(cell2); document.body.appendChild(table); //通过属性方法创建表格 var table = document.createElement("table");
table.border = 1;
table.width = "100%"; var tbody = document.createElement("tbody");
table.appendChild(body); //创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); //创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); document.body.appendChild(table);
document基本操作 动态脚本-动态样式-创建表格的更多相关文章
- 在MVC中动态读取JSON数据创建表格
//使用getJSON // ("@Url.Action("GetAllUsers","User")" ,json文件的路径.也可以是 /M ...
- Javascript高级编程学习笔记(43)—— 动态脚本
动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...
- JavaScript之表格操作(二)创建表格病填充表格数据
//创建表格 var tableOptions = { way: "insertBefore", //insertBefore,append positionId: "d ...
- 使用JS创建表格以及隔行换色(包括隔N行换色)
<html> <head> <title></title> <style> table{ width:800px; border-colla ...
- 第一百一十八节,JavaScript,动态加载脚本和样式
JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
- DOM操作技术之动态脚本与动态样式(兼容版)
动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...
- 利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
- javascript动态创建表格:新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
- DOM动态脚本和动态样式
动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...
随机推荐
- 剑指offer65:矩阵中的路径(二维数组,二分查找)
1 题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路径经过了矩 ...
- golang之方法
golang中的方法是作用在指定的数据类型上的(即:和指定 数据类型绑定),因此自定义类型,都可以有方法,而不仅仅是在struct. 方法的使用: type Person struct { Num i ...
- 《Java Web开发实战》——Java工程师必备干货教材
一年一度毕业季,又到了简历.offer漫天飞,失望与希望并存的时节.在IT行业,高校毕业生求职时,面临的第一道门槛就是技能与经验的考验,但学校往往更注重学生的理论知识,忽略了对学生实践能力的培养,因而 ...
- adb连接安卓设备的2种方式
一.usb连接 安卓设备打开开发者模式,启用usb调试 CMD窗口输入adb devices,此时可以看到自己的设备 PS:无法看到自己设备时,查看手机USB调试是否打开:PC端是否安装手机驱动. 二 ...
- Hibernate持久化,生命周期
一 .生命周期 1.1 . 说明 持久化类就是我们所说的实体类,实体类(持久化类)对象是有状态的. 为什么实体类对象会有状态? 答:由于HIbernate框架是一个先映射,后操作的框架.所谓的状 ...
- ELK搜索条件
1.要搜索一个确切的字符串,即精确搜索,需要使用双引号引起来:path:”/app/logs/nginx/access.log” 2.如果不带引号,将会匹配每个单词:uid token 3.模糊搜索: ...
- "多层感知器"--MLP神经网络算法
提到人工智能(Artificial Intelligence,AI),大家都不会陌生,在现今行业领起风潮,各行各业无不趋之若鹜,作为技术使用者,到底什么是AI,我们要有自己的理解. 目前,在人工智能中 ...
- iOS 动画基础-显式动画
摘要 显式动画 属性动画 CABasicAnimation *animation = [CABasicAnimation animation]; [self updateHandsAn ...
- 搭建一个简单的React项目
我是使用了create-react-app来搭建的基本框架,其中的原理和vue-cli差不多的脚手架.(当然也可以自己配置项目目录,这里我偷了一下懒) npm install -g create-re ...
- Java虚拟机(五):JVM 类加载机制
一.JVM 类加载机制 JVM 类加载机制分为五个部分:加载,验证,准备,解析,初始化,下面我们就分别来看一下这五个过程. 1. 加载: 加载是类加载过程中的第一个阶段,这个阶段会在内存中生成一个代表 ...