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 ...
随机推荐
- mysql常用系统函数归类
数学函数 函数 作用 ABS(x) 返回x的绝对值 BIN(x) 返回x的二进制(OCT返回八进制,HEX返回十六进制) EXP(x) 返回值e(自然对数的底)的x次方 GREATEST(x1,x2, ...
- Word 中批量修改所有表格格式样式
1. 引言 我们在使用Word排版编写书籍时候,可能会带有许多表格,上百,甚至上千个表格都是有可能的.这么多的表格对于后期的样式修改是非常不利的,有什么好的方法能够一次性修改文档中所有的表格,将其统一 ...
- Visual Studio Code 中实现 C++ 函数定义跳转和代码自动补全功能(25)
方法1: 1.1 安装插件 C++ Intellisense 名称: C++ Intellisense id: austin.code-gnu-global 说明: C/C++ Intellisens ...
- 2019秋季PAT甲级_备考总结
2019 秋季 PAT 甲级 备考总结 在 2019/9/8 的 PAT 甲级考试中拿到了满分,考试题目的C++题解记录在这里,此处对备考过程和考试情况做一个总结.如果我的方法能帮助到碰巧点进来的有缘 ...
- WUSTOJ 1326: Graph(Java)费马数
题目链接:1326: Graph 参考博客:HNUSTOJ-1617 Graph(费马数)--G2MI Description Your task is to judge whether a regu ...
- 【Linux】一步一步学Linux——Linux发展史(01)
目录 00. 目录 01. Linux概述 02. Linux简史 03. Linux主要特性 04. Linux之父 05. Linux相关术语 06. Linux其它 07. Linux应用领域 ...
- go语言实现单链表
线性表包含两种存储方法:顺序存储结构和链式存储结构,其中顺序表的缺点是不便插入与删除数据. 单链表:每个结点包含两部分:数据域+指针域,上一个结点的指针指向下一结点,依次相连,形成链表.特别注意的是每 ...
- Android--单选对话框
import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterfa ...
- 微信小程序的页面跳转==编程式导航传参 和 标签的方法传参==以及如何过去传递过来的参数
小程序导航传参接收传递过来的参数 在onload中 实例
- wstngfw中配置freeradius
wstngfw中配置freeradius Radius为各种网络设备和服务提供了一个认证来源. Radius认证常用于***.入网门户.交换机.路由器和防火墙.Radius认证比在网络上的不同设备跟踪 ...