JavaScriptDom操作与高级应用（八）
一：Dom操作基础与高级应用
Node接口也定义了一些所有节点类型都包含的属性和方法.
二：创建和操作节点
1)创建新节点
createDocumentFragment()
创建文档碎片节点
createElement(tagname)
创建标签名tagname的元素
createTextNode(text)
创建包含文本text的文本节点
appendChild()
添加子元素
实例：
<html>
<head>
<title>createElementd() Example</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function CreateP()
{
var Op = document.createElement("p");
var oText = document.createTextNode("Hellow World");
Op.appendChild(oText);
document.body.appendChild(Op);
}
function removeElement()
{
var oP = document.body.getElementsByTagName("p")[0];
//document.body.removeChild(oP);
oP.parentNode.removeChild(oP);
}
function ReplaceElement()
{
var oNewP = document.createElement("p");
var oText = document.createTextNode("aaaaaaaaaaaaaaaa");
oNewP.appendChild(oText);
var oOldP= document.body.getElementsByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP,oOldP);
}
function insertElement()
{
var oNewP = document.createElement("p");
var oText = document.createTextNode("aaaaaaaaaaaaaaaa");
oNewP.appendChild(oText);
var oOldP= document.body.getElementsByTagName("p")[0];
document.body.insertBefore(oNewP,oOldP);
}
//-->
</SCRIPT>
</head>
<body>
<p> Hellow</p>
<p> how are you?</p>
<p> ok</p>
<input type="button" value="createElement" onclick="CreateP()"/>
<input type="button" value="removeElement" onclick="removeElement()"/>
<input type="button" value="ReplaceElement" onclick="ReplaceElement()"/>
<input type="button" value="insertElement" onclick="insertElement()"/>
</body>
</html>
鼠标放上和离开的样式：
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <input type="button" value="click Me" style="background-color:white;color:black"
onmouseover="this.style.backgroundColor='black';this.style.color='white';"
onmouseout="this.style.backgroundColor='white';this.style.color='black'"/> </BODY> </HTML>
鼠标放上去的提示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta charset="utf-8" />
<SCRIPT LANGUAGE="JavaScript">
<!--
function showTip(oEvent)
{
//alert(document.documentElement.scrollTop);
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility ="visible";
oDiv.style.left = document.documentElement.scrollLeft+ oEvent.clientX+5;
oDiv.style.top = document.documentElement.scrollTop+oEvent.clientY+5;
}
function hiddenTip(oEvent)
{
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<a href="javascript:void(0)" onmouseover="showTip(event)"
onmouseout = "hiddenTip(event)">click me</a>
<div id="divTip1" style="background-color:Yellow;position:absolute;visibility:hidden;padding:5px;">
<span>这是提示<br />
提示</span>
</div>
</BODY>
</HTML>
表格排序：
一、数组排序
例：
var arr = [3,32,5,34];
arr.sort();
alert(arr.toString()); //output “3,32,34,5”
问题：如何实现正确的排序?
一个基本的比较函数:
function comparison_function(value1,value2){
if (value1<value2)
return -1
else if (value1>value2)
return 1
else
return 0
}
//说明：返回1代表升序,返回-1代表降序,返回0代表相等
var arr = [3,32,5,34];
arr.sort(comparison_function);
alert(arr.toString()); //output “3,5,32,34”
如果要降序？
function comparison_function(value1,value2){
if (value1<value2)
return 1
else if (value1>value2)
return -1
else
return 0
}
var arr = [3,32,5,34];
arr.sort(comparison_function);
alert(arr.toString()); //output “34,32,5,3”
ureverse()方法
var arr = [3,32,5,34];
arr.sort(comparison_function);
alert(arr.toString()); //output “34,32,5,3”
//反转
arr.reverse();
alert(arr.toString()); //output “3,5,32,34”
说明：如果数组已经以一种顺序排序了，使用reverse()方法将其按照相反的顺序排序，要比再次调用sort()快得多
三：表格排序
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
//升序
function comparisonTRs(oTR1,oTR2){
var value1 = oTR1.cells[0].firstChild.nodeValue;
var value2 = oTR2.cells[0].firstChild.nodeValue;
if (value1<value2)
return -1
else if (value1>value2)
return 1
else
return 0
}
var sourceHeader = "";
function SortTable(sTableID,header)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var oTRs = new Array();
for(var i=0;i<colDataRows.length;i++)
{
oTRs.push(colDataRows[i]);
}
if (!header.sortType)
{
//alert("ok");
sourceHeader = header.innerHTML;
oTRs.sort(comparisonTRs);
header.sortType="ASC";
header.innerHTML=sourceHeader+"↑";
}else
{
oTRs.reverse();
header.innerHTML=sourceHeader+"↓";
if (header.sortType=="ASC")
{
header.innerHTML=sourceHeader+"↓";
header.sortType="DESC";
}else
{
header.sortType="ASC";
header.innerHTML=sourceHeader+"↑";
}
}
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTRs.length;i++)
{
oFragment.appendChild(oTRs[i]);
}
oTBody.appendChild(oFragment);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>
<table border="1" id="table1" width=200>
<thead>
<tr>
<th onclick = "SortTable('table1',this)" style="cursor:pointer">first Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhang</td>
</tr>
<tr>
<td>wang</td>
</tr>
<tr>
<td>li</td>
</tr>
<tr>
<td>zhaoliu</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
//升序
function comparisonTRs(oTR1,oTR2){
var value1 = oTR1.cells[0].firstChild.nodeValue;
var value2 = oTR2.cells[0].firstChild.nodeValue;
if (value1<value2)
return -1
else if (value1>value2)
return 1
else
return 0
}
var sourceHeader = "";
function SortTable(sTableID,header)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var oTRs = new Array();
for(var i=0;i<colDataRows.length;i++)
{
oTRs.push(colDataRows[i]);
}
if (!header.sortType)
{
//alert("ok");
sourceHeader = header.innerHTML;
oTRs.sort(comparisonTRs);
header.sortType="ASC";
header.innerHTML=sourceHeader+"↑";
}else
{
oTRs.reverse();
header.innerHTML=sourceHeader+"↓";
if (header.sortType=="ASC")
{
header.innerHTML=sourceHeader+"↓";
header.sortType="DESC";
}else
{
header.sortType="ASC";
header.innerHTML=sourceHeader+"↑";
}
}
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTRs.length;i++)
{
oFragment.appendChild(oTRs[i]);
}
oTBody.appendChild(oFragment);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>
<table border="1" id="table1" width=200>
<thead>
<tr>
<th onclick = "SortTable('table1',this)" style="cursor:pointer">first Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>zhang</td>
</tr>
<tr>
<td>wang</td>
</tr>
<tr>
<td>li</td>
</tr>
<tr>
<td>zhaoliu</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
function SortTable(sTableID)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var oTRs = new Array();
for(var i=0;i<colDataRows.length;i++)
{
aTRs.push(colDataRows[i]);
}
aTRs.sort(comparisonTRs);
....
}
改进二：
改进二：
function SortTable(sTableID)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var oTRs = new Array();
for(var i=0;i<colDataRows.length;i++)
{
oTRs.push(colDataRows[i]);
}
oTRs.sort(comparisonTRs);
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTRs.length;i++)
{
oFragment.appendChild(oTRs[i]);
}
oTBody.appendChild(oFragment);
}
实例二：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function genCompareTo(iCol){
return function compareTRs(oTR1,oTR2)
{
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
return sValue1.localeCompare(sValue2);
}
}
function sortTable(sTableID,header,colindex)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var oTRs = new Array();
for(var i=0;i<colDataRows.length;i++)
{
oTRs.push(colDataRows[i]);
}
if (!header.sortType)
{
oTRs.sort(genCompareTo(colindex));
header.sortType="ASC";
header.sourceName = header.innerText;
header.innerHTML=header.sourceName+"↑";
}else
{
oTRs.reverse();
header.innerHTML=header.sourceName+"↓";
if (header.sortType=="ASC")
{
header.innerHTML=header.sourceName+"↓";
header.sortType="DESC";
}else
{
header.sortType="ASC";
header.innerHTML=header.sourceName+"↑";
}
}
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTRs.length;i++)
{
oFragment.appendChild(oTRs[i]);
}
oTBody.appendChild(oFragment);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort',this, 0)" style="cursor:pointer">Last Name</th>
<th onclick="sortTable('tblSort',this, 1)" style="cursor:pointer">First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
</tr>
<tr>
<td>Johnson</td>
<td>Betty</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
表格排序：
1、创建转换函数
function convert(sValue,sDataType)
{
switch (sDataType)
{
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
default
return sValue.toString();
}
}
2、修改代码：
function genCompareTo(iCol,sDataType){
return function compareTRs(oTR1,oTR2)
{
var sValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
var sValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if (sValue1<sValue2)
{
return -1;
}else if (sValue1>sValue2)
{
return 1;
}else{
return 0;
}
}
}
高级排序
问题：
如果表格中出现链接、图像或某种HTML的内容，而用户仍希望对其进行排序。最常见的情况也许就是包含图标的列.
解决方案：
1、候选值
表格中的每个单元格必须包含可排序的值，也就是说至少有一个值属于以下数据类型:字符串、整形、浮点数和日期,因为HTML代码不能直接被转化为这些数据类型，所以需指定一个候选值。可以通过以下方式实现：如：
<td value = “blue”><img src = “blueimag.gif”/></td>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function convert(sValue,sDataType)
{
switch (sDataType)
{
case "int":
return parseInt(sValue);
case "float":
return parseFloat(sValue);
case "date":
return Date.parse(sValue);
default:
return sValue.toString();
}
}
function genCompareTo(iCol,sDataType){
return function compareTRs(oTR1,oTR2)
{
var sValue1;
var sValue2;
if (oTR1.cells[iCol].getAttribute("value"))
{
sValue1 = convert(oTR1.cells[iCol].getAttribute("value"),sDataType);
sValue2 = convert(oTR2.cells[iCol].getAttribute("value"),sDataType);
}else
{
sValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
sValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
}
if (sValue1<sValue2)
{
return -1;
}else if (sValue1>sValue2)
{
return 1;
}else{
return 0;
}
}
}
function sortTable(sTableID,header,colindex,sDataType)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var oTRs = new Array();
for(var i=0;i<colDataRows.length;i++)
{
oTRs.push(colDataRows[i]);
}
if (!header.sortType)
{
oTRs.sort(genCompareTo(colindex,sDataType));
header.sortType="ASC";
header.sourceName = header.innerText;
header.innerHTML=header.sourceName+"↑";
}else
{
oTRs.reverse();
header.innerHTML=header.sourceName+"↓";
if (header.sortType=="ASC")
{
header.innerHTML=header.sourceName+"↓";
header.sortType="DESC";
}else
{
header.sortType="ASC";
header.innerHTML=header.sourceName+"↑";
}
}
var oFragment = document.createDocumentFragment();
for(var i=0;i<oTRs.length;i++)
{
oFragment.appendChild(oTRs[i]);
}
oTBody.appendChild(oFragment);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<p>Click on the table header to sort.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort',this, 0)" style="cursor:pointer">Type</th>
<th onclick="sortTable('tblSort',this, 0)" style="cursor:pointer">Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td value="doc"><img src="images/wordicon.gif"/></td>
<td>My Resume.doc</td>
</tr>
<tr>
<td value="xls"><img src="images/excelicon.gif"/></td>
<td>Fall Budget.xls</td>
</tr>
<tr>
<td value="pdf"><img src="images/acrobaticon.gif"/></td>
<td>How to be a better programmer.pdf</td>
</tr>
<tr>
<td value="doc"><img src="images/wordicon.gif"/></td>
<td>My Old Resume.doc</td>
</tr>
<tr>
<td value="txt"><img src="images/notepadicon.gif"/></td>
<td>Notes from Meeting.txt</td>
</tr>
<tr>
<td value="zip"><img src="images/zippedfoldericon.gif"/></td>
<td>Backups.zip</td>
</tr>
<tr>
<td value="xls"><img src="images/excelicon.gif"/></td>
<td>Spring Budget.xls</td>
</tr>
<tr>
<td value="doc"><img src="images/wordicon.gif"/></td>
<td>Job Description - Web Designer.doc</td>
</tr>
<tr>
<td value="pdf"><img src="images/acrobaticon.gif"/></td>
<td>Saved Web Page.pdf</td>
</tr>
<tr>
<td value="doc"><img src="images/wordicon.gif"/></td>
<td>Chapter 1.doc</td>
</tr>
</tbody>
</table>
</body>
</HTML>
效果：
四：经典的鼠标拖尾
<html>
<head>
<title>Simulated Drag And Drop Example</title>
<script type="text/javascript" src="eventutil.js"></script>
<script type="text/javascript">
function handleMouseMove() {
//var oEvent = EventUtil.getEvent();
var oEvent = window.event;
var oDiv = document.getElementById("div1");
oDiv.style.left = oEvent.clientX;
oDiv.style.top = oEvent.clientY;
}
</script>
<style type="text/css">
#div1 {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
}
</style>
</head>
<body onmousemove="handleMouseMove()">
<p>Try dragging the red square.</p>
<p><div id="div1"></div> </p>
</body>
</html>
<body>
<p>Try dragging the red square.</p>
<p>
<div id="div1" onmousedown="handleMouseDown()"></div>
</p>
</body>
<style type="text/css">
#div1 {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
}
</style>
var iDiffX=0;
var iDiffY = 0;
function handleMouseDown() {
var oEvent = window.event;
var oDiv = document.getElementById("div1");
iDiffX = oEvent.clientX - oDiv.offsetLeft;
iDiffY = oEvent.clientY - oDiv.offsetTop;
document.body.attachEvent("onmousemove",handleMouseMove);
document.body.attachEvent("onmouseup",handleMouseUp);
}
function handleMouseMove() {
var oEvent = window.event;
var oDiv = document.getElementById("div1");
oDiv.style.left = oEvent.clientX - iDiffX;
oDiv.style.top = oEvent.clientY - iDiffY;
oDiv.style.cursor="move";
}
function handleMouseUp() {
var oDiv = document.getElementById("div1"); document.body.detachEvent("onmousemove",handleMouseMove); document.body.detachEvent("onmouseup",handleMouseUp);
oDiv.style.cursor="default";
}
浙公网安备 33010602011771号