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 ...
随机推荐
- Ribbon源
在Riibon中一个非常重要的组件为LoadBalancerClient,它作为负载均衡的一个客户端 ServiceInstance choose(String serviceId); 从负载均衡器中 ...
- DAO工具类的封装源码
详细源码见下表,绝对原创,转载请注明出处! package com.ydj.util; import java.sql.Connection; import java.sql.PreparedStat ...
- springboot(3):整合Servlet,filter,listener
1.springboot整合Servlet(2种方式) 添加maven依赖:spring-boot-starter-web 1>通过注解扫描完成Servlet组件的注册(方式1) 步骤:需要3步 ...
- [C++] 例题 2.7.1 用栈实现简易计算器
目录 前置技能 栈 (stack) 中缀表达式 (InfixExp) 与后缀表达式 (PostfixExp) 需求描述 概要设计 函数详细设计 中缀转后缀 infix_to_postfix(strin ...
- Python程序计算ax^2+bx+c=0方程根
程序用来计算ax^2+bx+c=0的两个根,有些异常暂时无法处理: #!/usr/bin/python # -*- coding: utf-8 -*- #当程序存在中文时,注释表明使用utf-8编码解 ...
- php生成动态验证码 加减算法验证码 简单验证码
预览效果: <?php /** *ImageCode 生成包含验证码的GIF图片的函数 *@param $string 字符串 *@param $width 宽度 *@param $height ...
- Scala 面向对象编程之对象
此对象非彼java bean对象 是scala object的对象 Object // object,相当于class的单个实例,通常在里面放一些静态的field或者method // 第一次调用ob ...
- java连接腾讯云上的redis
目录 腾讯云上的配置 redis连接单机和集群 依赖 pom.xml redis参数的配置文件 遗留问题 腾讯云上的配置 在安全组上打开相关的端口即可 "来源" 就是你的目标服务器 ...
- 如何录屏做GIF图
网上找了一下,ScreenToGif 这个神器 https://github.com/NickeManarin/ScreenToGif https://github.com/NickeManarin/ ...
- python—各种常用函数及库
列表list1.append(x) 将x添加到列表末尾 list1.sort() 对列表元素排序 list1.reverse() 将 ...