📄 9-4.html

📁 文件是《精通Javascript+jQuery》的书中实例
💻 HTML
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>responseXML</title>
<style>
<!--
.datalist{
	border:1px solid #744011;	/* 表格边框 */
	font-family:Arial;
	border-collapse:collapse;	/* 边框重叠 */
	background-color:#ffd2aa;	/* 表格背景色 */
	font-size:14px;
}
.datalist th{
	border:1px solid #744011;	/* 行名称边框 */
	background-color:#a16128;	/* 行名称背景色 */
	color:#FFFFFF;				/* 行名称颜色 */
	font-weight:bold;
	padding-top:4px; padding-bottom:4px;
	padding-left:12px; padding-right:12px;
	text-align:center;
}
.datalist td{
	border:1px solid #744011;	/* 单元格边框 */
	text-align:left;
	padding-top:4px; padding-bottom:4px;
	padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
	background-color:#dca06b;	/* 动态变色 */
}
input{	/* 按钮的样式 */
	border:1px solid #744011;
	color:#744011;
}
-->
</style>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
	if(window.ActiveXObject)
		xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
	else if(window.XMLHttpRequest)
		xmlHttp = new XMLHttpRequest();
}
function getXML(addressXML){
	var url = addressXML + "?timestamp=" + new Date();
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET",url);
	xmlHttp.send(null);
}
function addTableRow(sName, sClass, sBirth, sConstell, sMobile){
	//表格添加一行的相关操作，可参看7.2.1节
	var oTable = document.getElementById("member");
	var oTr = oTable.insertRow(oTable.rows.length);	
	var aText = new Array();
	aText[0] = document.createTextNode(sName);
	aText[1] = document.createTextNode(sClass);
	aText[2] = document.createTextNode(sBirth);
	aText[3] = document.createTextNode(sConstell);
	aText[4] = document.createTextNode(sMobile);
	for(var i=0;i<aText.length;i++){
		var oTd = oTr.insertCell(i);
		oTd.appendChild(aText[i]);
	}
}
function DrawTable(myXML){
	//用DOM方法操作XML文档
	var oMembers = myXML.getElementsByTagName("member");
	var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";
	for(var i=0;i<oMembers.length;i++){
		oMember = oMembers[i];
		sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
		sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
		sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
		sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
		sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
		//添加一行
		addTableRow(sName, sClass, sBirth, sConstell, sMobile);
	}
}
function handleStateChange(){	
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
		DrawTable(xmlHttp.responseXML);	//responseXML获取到XML文档
}
</script>
</head>

<body>
<input type="button" value="获取XML" onclick="getXML('9-4.xml');"><br><br>
<table class="datalist" summary="list of members in EE Studay" id="member">
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Class</th>
		<th scope="col">Birthday</th>
		<th scope="col">Constellation</th>
		<th scope="col">Mobile</th>
	</tr>
</table>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -