Dom操作高级应用

table

tBodies,tHead,tFoot,rows,cells

一个table有多个tbody

oTab.tBodies[0].rows[i].style.background = "#ccc";

示例：隔行换色

window.onload = function(){
 var oTab = document.getElementById("tab1");
 var oldColor;　　//关键点：保存行的旧样式
 
 oTab.tBodies[0].rows[0].cells[1].innerHTML = "jack";
 
 for(var i=0; i<oTab.tBodies[0].rows.length; i++){
  
  if(i%2==0){
   oTab.tBodies[0].rows[i].style.background = "#ccc";
  }
  else{
   oTab.tBodies[0].rows[i].style.background = "";
  }
  
  
  oTab.tBodies[0].rows[i].onmouseover = function(){
   oldColor = this.style.background;　　//保存行的旧样式
   this.style.background = "green";
  }
  
  oTab.tBodies[0].rows[i].onmouseout = function(){
   this.style.background = oldColor;
  }   
 } 
}

添加删除行

+++++++++++++++++++++++++++++++++++++++

window.onload = function(){
	var oTab = document.getElementById("tab1");
	var oName = document.getElementById("txtName");
	var oAge = document.getElementById("txtAge");
	var oBtn = document.getElementById("btn1");

	var maxId = oTab.tBodies[0].rows.length + 1;  //第一种
	oBtn.onclick = function(){

		var oTr = document.createElement("tr");

		var oTd1 = document.createElement("td");
		var oTd2 = document.createElement("td");
		var oTd3 = document.createElement("td");
		var oTd4 = document.createElement("td");
		//var oA = document.createElement("a");

		var length =oTab.tBodies[0].rows.length;
		//var maxId =oTab.tBodies[0].rows[length-1].cells[0].innerHTML;	  //第二种
		//oTd1.innerHTML = parseInt(maxId) + 1;

		oTd1.innerHTML = maxId++;

		oTd2.innerHTML = oName.value;
		oTd3.innerHTML = oAge.value;
		oTd4.innerHTML = '<a href="javascript:;">删除</a>';

		/*
		oA.innerHTML = "删除";
		oA.setAttribute("href","javascript:;");
		oTd4.appendChild(oA);
		*/

		oTr.appendChild(oTd1);
		oTr.appendChild(oTd2);
		oTr.appendChild(oTd3);
		oTr.appendChild(oTd4);

		////异常：　删除新添加行正常,删除旧行不正常		
　　　　　　　　　　oTd4.getElementsByTagName("a")[0].onclick=function(){
			oTab.tBodies[0].removeChild(this.parentNode.parentNode);
		}

		oTab.tBodies[0].appendChild(oTr);	

	}

	// 异常：新添加的行不能删除
	var aA = oTab.tBodies[0].getElementsByTagName("a");

	for(var i=0; i<aA.length; i++){
		aA[i].onclick = function(){
			oTab.tBodies[0].removeChild(this.parentNode.parentNode);
		}

	}

}

表格搜索
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

window.onload = function(){

	var oTxt = document.getElementById("txt1");
	var oBtn = document.getElementById("btn1");
	var oTab = document.getElementById("tab1");

	oBtn.onclick = function(){
		for(var i=0; i<oTab.tBodies[0].rows.length; i++){
			var oRow = oTab.tBodies[0].rows[i];
			var vTd = oRow.cells[1].innerHTML;
			//if(oTxt.value == vTd){
			//if(vTd.search(oTxt.value) != -1){	//模糊搜索str.search()
			//if(vTd.toLowerCase().search(oTxt.value.toLowerCase()) != -1){	//模糊搜索str.search() + 忽略大小写

			//关联搜索  如“张,李”
			var arr = oTxt.value.split(',');

			oRow.style.background = "";
			for(var j=0; j<arr.length; j++){	//这里不能再定义i,否则会出问题
				if(vTd.toLowerCase().search(arr[j].toLowerCase()) != -1){	//模糊搜索str.search() + 忽略大小写
					oRow.style.background = "green";
				}
			}

		}

	}

}