JS_DOM编程_动态表格的实现

动态 Html代码加载到浏览器,代码运行后

改变文档(DOM树)

全部是动态的

1. 改变节点属性
2. 改变节点位置
3. 增加删除节点

NodeType:

@return value = int ;

1为元素
2为属性
3为文本

NodeName

@return 节点的名称

NodeValue:

@return 节点的数值

追加子节点

XXX.appendchild(子节点Id);

赋值方法

xxx.setatribute(“color”,“red”) ;

创建有两种

元素节点 creatElement
文本节点creatTextNode

select

function() {
var myDiv = document.getElementById("myDiv") ;  
//定义Div容器
var selectNode = document.getElementById("select");
//定义选择节点
var optionNode  = document.getElementByid("option")  ; 
//定义选项子节点 
optionNode.value = "1";//选项的值从1开始
var optionText = document.getElementById("西安") ;
//选项的文本是选项的子节点 是西安 文本节点
/**
*逐个添加节点 
*使用appendchild方法
**/
optionNode.appendchild(optionText) 
selectNode.appendchild(optionNode) 
Mydiv.appendchild(selectNode) 

删除节点

删除节点从最后开始删除

function  delete(){
var myDiv = document.getElementById("myDiv") ; 
myDic.removeChild(myDiv.last) ; 
}

实现动态表格

/**
*部分实现JS 动态代码
**/
//创建生成的行代码
function saveinfo(){
	var tb = document.getElementById("tb") ; //得到table的节点
	var tr = document.creatElement("tr") ; 
	var td = document.creatElement("td") 
		var td1 = document.creatElement("td") 
			var td2 = document.creatElement("td") 
			tr.appendChild("td ")
			tr.appendChild("td1 ")
			tr.appendChild("td2 ")
			//以上都是创建好了元素节点 每一行还都没有赋值
			//开始创建文本节点 第一列的用户名信息
	var userName = document.getElementById(userName ) ;
	var usernameText = document.createTextNode(userName) ; 
	//找到账户的节点  然后在账户的节点里创建文本节点 
	//把值的结果直接添加到Td中 不需要再添加给Username了 
	td.appendChild("usernameText")
	
	
	a.href = "javascript:void(0)" ; 
	//禁用超链接 
	//删除的代码 
	function deleteRow(){
	var ok = confirm('你确定要删除吗') 
	 if(ok){
		var tb = document.getElementById("tb")
	 var tr = this.parentNode.parentNode ;
	 tb.removeChild ("tr");

	 }
	 
	 
}