javascript筆記--（第二十一章）DOM操作表格及樣式

2024-04-27 15:11:15

字體：大中小

來源：轉載

供稿：網友

操作表格

<table>標簽是HTML中結構最為復雜的一個，我們可以通過DOM來創建生成它，或者HTML DOM來操作。HTML DOM提供了更加方便快捷的方式來操作HTML。

<script type="text/javascript">	var table = document.createElement('table');	table.border = 1;	table.width = 300;		var caption = document.createElement('caption');	table.appendChild(caption);	caption.appendChild(document.createTextNode('人員表'));		var thead = document.createElement('thead');	table.appendChild(thead);	var tr = document.createElement('tr');	thead.appendChild(tr);		var th1 = document.createElement('th');	var th2 = document.createElement('th');		tr.appendChild(th1);	th1.appendChild(document.createTextNode('姓名'));	tr.appendChild(th2);	th2.appendChild(document.createTextNode('年齡'));		document.body.appendChild(table);</script>Table對象
table對象常用集合集合 描述
cells[] 返回包含表格中所有單元格的一個數組。
rows[] 返回包含表格中所有行的一個數組。
tBodies[] 返回包含表格中所有 tbody 的一個數組。
table對象常用屬性屬性 描述
caption 對表格的 <caption> 元素的引用。
tFoot 返回表格的 TFoot 對象。如果不存在該元素，則為 null。
tHead 返回表格的 THead 對象。如果不存在該元素，則為 null。
table對象常用方法方法 描述
createCaption() 為表格創建一個 caption 元素。
createTFoot() 在表格中創建一個空的 tFoot 元素。
createTHead() 在表格中創建一個空的 tHead 元素。
deleteCaption() 從表格刪除 caption 元素以及其內容。
deleteRow() 從表格刪除一行。
deleteTFoot() 從表格刪除 tFoot 元素及其內容。
deleteTHead() 從表格刪除 tHead 元素及其內容。
insertRow() 在表格中插入一個新行。
<script type="text/Javascript">	var table = document.createElement('table');	table.border = 1;	table.width = 300;		var caption = table.createCaption();	caption.innerHTML = "人員表"	table.appendChild(caption);	var thead = table.createTHead();//crate后就自動添加到table里了	var tr1 = thead.insertRow(0);//插入tr	var td1_1 = tr1.insertCell(0);	var td1_2 = tr1.insertCell(1);	td1_1.innerHTML = "tr1.insertCell_td1_1";	td1_2.innerHTML = "tr1.insertCell_td1_2";	var tr2 = table.insertRow(0);//tr集合的第一個位置,包括thead,tbody,tfoot的tr	var td2_1 = tr2.insertCell(0);//插入td	var td2_2 = tr2.insertCell(1);	td2_1.innerHTML = "tr2.insertCell_td2_1";	td2_2.innerHTML = "tr2.insertCell_td2_2";	tr2.deleteCell(1);//刪除第二個td	var tbody = document.createElement("tbody");//table沒有createTBody方法	var tr3 = tbody.insertRow();	var td3_1 = tr3.insertCell(0);	var td3_2 = tr3.insertCell(1);	td3_1.innerHTML = "tr3.insertCell_td3_1";	td3_2.innerHTML = "tr3.insertCell_td3_2";	table.appendChild(tbody);//需要手動append,這個tbody會在tfoot之后	var tfoot = table.createTFoot();//crate后就自動添加到table里了	var tr4 = tfoot.insertRow();	var td4_1 = tr4.insertCell(0);	var td4_2 = tr4.insertCell(1);	td4_1.innerHTML = "tr4.insertCell_td4_1";	td4_2.innerHTML = "tr4.insertCell_td4_2";	tfoot.deleteRow(0);//刪除tfoot第一個tr	table.deleteRow(0);//刪除tr集合中的第一行	table.deleteCaption();//刪除caption	table.deleteTHead();//刪除table的thead	table.deleteTFoot();//刪除table的tfoot	document.body.appendChild(table);</script>操作樣式
訪問元素的樣式
任何HTML元素標簽都會有一個通用的屬性：style。它會返回CSSStypeDeclaration對象。<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div id="box" style="color:red;font-size:12px;"></div></body><script type="text/javascript">	var box = document.getElementById('box');//獲取box	console.log(box.style);//CSSStyleDeclaration	console.log(box.style.color);//red	console.log(box.style.fontSize);//12px	box.style.setPRoperty("border","1px");//添加和設置屬性	box.style.removeProperty('color');//移除某個熟悉	box.style.cssText = "background-color:blue";//設置style屬性	console.log(box.style.backgroundColor);//blue</script></html>getComputedStyle()和currentStyle能獲取行內樣式，內嵌樣式或者外部樣式，不過只可以讀<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title>	<style type="text/css">		#box{			color:red;font-size:12px;		}	</style></head><body>	<div id="box" style=""></div></body><script type="text/javascript">	var box = document.getElementById('box');//獲取box	var style = window.getComputedStyle ?		window.getComputedStyle(box, null) : null || box.currentStyle;	console.log(style.color);//rgb(255, 0, 0);	style.cssText = "background-color:blue";//報錯</script></html>操作樣式表
添加刪除className<script type="text/javascript">	var box = document.getElementById('box');//獲取box	//判斷是否存在這個class	function hasClass(element, className) {  		return element.className.match(new RegExp('(//s|^)'+className+'(//s|$)'));	}	//添加一個class，如果不存在的話	function addClass(element, className) {		if (!hasClass(element, className))   {       			element.className += " "+className;  		}	}	//刪除一個class，如果存在的話	function removeClass(element, className) {   		if (hasClass(element, className)) {         			element.className = element.className.replace(new RegExp('(//s|^)'+className+'(//s|$)'),' ');   		}	}	addClass(box,"class1");	addClass(box,"class2");	removeClass(box,"class1");</script>添加刪除css規則<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title>	<style type="text/css">		#box{			color:red;font-size:12px;		}	</style></head><body>	<div id="box"></div></body><script type="text/javascript">	//為了添加CSS規則，并且兼容所有瀏覽器，我們必須寫一個函數：	var sheet = document.styleSheets[0];		/*	//也可以通過以下方式獲取相應sheet	var link = document.getElementsByTagName('link')[0];	//HTMLLinkElement	var style = document.getElementsByTagName('style')[0];	//HTMLStyleElement	var sheet = style.sheet || style.styleSheet;		var sheet = link.sheet || link.styleSheet;	*/	var rules = sheet.cssRules || sheet.rules;	console.log(rules[0].selectorText);//#box	console.log(rules[0].style.color);//red	console.log(rules[0].cssText);//#box { color: red; font-size: 12px; }	rules[0].cssText = "#box {background-color:red}";//無效	function insertRule(sheet, selectorText, cssText, position) {		//如果是非IE		if (sheet.insertRule) {			sheet.insertRule(selectorText + "{" + cssText + "}", position);		//如果是IE		} else if (sheet.addRule) {			sheet.addRule(selectorText, cssText, position);		}	}	insertRule(sheet, "#box", "background-color:red;", 0);//在第一個位置新建一個規則	console.log(rules[0].selectorText);//#box	console.log(rules[0].style.backgroundColor);//red	//為了刪除CSS規則，并且兼容所有瀏覽器，我們必須寫一個函數：	function deleteRule(sheet, index) {		//如果是非IE		if (sheet.deleteRule) {			sheet.deleteRule(index);		//如果是IE		} else if (sheet.removeRule) {			sheet.removeRule(index);		}	}	deleteRule(sheet, 0);//刪除第一個規則	console.log(rules[0].selectorText);//#box	console.log(rules[0].style.color);//red</script></html>總結：三種操作CSS的方法，第一種style行內，可讀可寫；第二種行內、內聯和鏈接，使用getComputedStyle或currentStyle，可讀不可寫；第三種cssRules或rules，內聯和鏈接可讀可寫。

集合	描述
cells[]	返回包含表格中所有單元格的一個數組。
rows[]	返回包含表格中所有行的一個數組。
tBodies[]	返回包含表格中所有 tbody 的一個數組。

屬性	描述
caption	對表格的 <caption> 元素的引用。
tFoot	返回表格的 TFoot 對象。如果不存在該元素，則為 null。
tHead	返回表格的 THead 對象。如果不存在該元素，則為 null。

方法	描述
createCaption()	為表格創建一個 caption 元素。
createTFoot()	在表格中創建一個空的 tFoot 元素。
createTHead()	在表格中創建一個空的 tHead 元素。
deleteCaption()	從表格刪除 caption 元素以及其內容。
deleteRow()	從表格刪除一行。
deleteTFoot()	從表格刪除 tFoot 元素及其內容。
deleteTHead()	從表格刪除 tHead 元素及其內容。
insertRow()	在表格中插入一個新行。