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

2024-04-27 15:11:15

字體：大中小

供稿：網(wǎng)友

操作表格

<table>標(biāo)簽是HTML中結(jié)構(gòu)最為復(fù)雜的一個(gè)，我們可以通過(guò)DOM來(lái)創(chuàng)建生成它，或者HTML DOM來(lái)操作。HTML DOM提供了更加方便快捷的方式來(lái)操作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對(duì)象
table對(duì)象常用集合集合 描述
cells[] 返回包含表格中所有單元格的一個(gè)數(shù)組。
rows[] 返回包含表格中所有行的一個(gè)數(shù)組。
tBodies[] 返回包含表格中所有 tbody 的一個(gè)數(shù)組。
table對(duì)象常用屬性屬性 描述
caption 對(duì)表格的 <caption> 元素的引用。
tFoot 返回表格的 TFoot 對(duì)象。如果不存在該元素，則為 null。
tHead 返回表格的 THead 對(duì)象。如果不存在該元素，則為 null。
table對(duì)象常用方法方法 描述
createCaption() 為表格創(chuàng)建一個(gè) caption 元素。
createTFoot() 在表格中創(chuàng)建一個(gè)空的 tFoot 元素。
createTHead() 在表格中創(chuàng)建一個(gè)空的 tHead 元素。
deleteCaption() 從表格刪除 caption 元素以及其內(nèi)容。
deleteRow() 從表格刪除一行。
deleteTFoot() 從表格刪除 tFoot 元素及其內(nèi)容。
deleteTHead() 從表格刪除 tHead 元素及其內(nèi)容。
insertRow() 在表格中插入一個(gè)新行。
<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后就自動(dòng)添加到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集合的第一個(gè)位置,包括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);//刪除第二個(gè)td	var tbody = document.createElement("tbody");//table沒(méi)有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);//需要手動(dòng)append,這個(gè)tbody會(huì)在tfoot之后	var tfoot = table.createTFoot();//crate后就自動(dòng)添加到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第一個(gè)tr	table.deleteRow(0);//刪除tr集合中的第一行	table.deleteCaption();//刪除caption	table.deleteTHead();//刪除table的thead	table.deleteTFoot();//刪除table的tfoot	document.body.appendChild(table);</script>操作樣式
訪問(wèn)元素的樣式
任何HTML元素標(biāo)簽都會(huì)有一個(gè)通用的屬性：style。它會(huì)返回CSSStypeDeclaration對(duì)象。<!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");//添加和設(shè)置屬性	box.style.removeProperty('color');//移除某個(gè)熟悉	box.style.cssText = "background-color:blue";//設(shè)置style屬性	console.log(box.style.backgroundColor);//blue</script></html>getComputedStyle()和currentStyle能獲取行內(nèi)樣式，內(nèi)嵌樣式或者外部樣式，不過(guò)只可以讀<!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";//報(bào)錯(cuò)</script></html>操作樣式表
添加刪除className<script type="text/javascript">	var box = document.getElementById('box');//獲取box	//判斷是否存在這個(gè)class	function hasClass(element, className) {  		return element.className.match(new RegExp('(//s|^)'+className+'(//s|$)'));	}	//添加一個(gè)class，如果不存在的話	function addClass(element, className) {		if (!hasClass(element, className))   {       			element.className += " "+className;  		}	}	//刪除一個(gè)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規(guī)則<!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規(guī)則，并且兼容所有瀏覽器，我們必須寫(xiě)一個(gè)函數(shù)：	var sheet = document.styleSheets[0];		/*	//也可以通過(guò)以下方式獲取相應(yīng)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}";//無(wú)效	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);//在第一個(gè)位置新建一個(gè)規(guī)則	console.log(rules[0].selectorText);//#box	console.log(rules[0].style.backgroundColor);//red	//為了刪除CSS規(guī)則，并且兼容所有瀏覽器，我們必須寫(xiě)一個(gè)函數(shù)：	function deleteRule(sheet, index) {		//如果是非IE		if (sheet.deleteRule) {			sheet.deleteRule(index);		//如果是IE		} else if (sheet.removeRule) {			sheet.removeRule(index);		}	}	deleteRule(sheet, 0);//刪除第一個(gè)規(guī)則	console.log(rules[0].selectorText);//#box	console.log(rules[0].style.color);//red</script></html>總結(jié)：三種操作CSS的方法，第一種style行內(nèi)，可讀可寫(xiě)；第二種行內(nèi)、內(nèi)聯(lián)和鏈接，使用getComputedStyle或currentStyle，可讀不可寫(xiě)；第三種cssRules或rules，內(nèi)聯(lián)和鏈接可讀可寫(xiě)。

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

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

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