http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FGUI_Components%2FTable_Sorter
JavaScript Tutorial/GUI Components/Table Sorter - История изменений
2026-04-04T10:27:56Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/GUI_Components/Table_Sorter&diff=9185&oldid=prev
Admin: 1 версия
2010-05-26T08:24:52Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/GUI_Components/Table_Sorter&diff=9184&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Assign mouse move event coordinate to element style==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Simulated Drag And Drop Example</title><br />
<script type="text/javascript"><br />
<br />
function handleMouseMove(oEvent) {<br />
var oDiv = document.getElementById("div1");<br />
oDiv.style.left = oEvent.clientX;<br />
oDiv.style.top = oEvent.clientY;<br />
}<br />
<br />
</script><br />
</head><br />
<body onmousemove="handleMouseMove(event)"><br />
<P>Try moving your mouse around.</p><br />
<div id="div1" style="background-color: red;height: 100px;width: 100px;position: absolute;"><br />
Test<br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== System Drag And Drop Example==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>System Drag And Drop Example</title><br />
<script type="text/javascript"><br />
<br />
function handleMouseMove(oEvent) {<br />
oEvent.srcElement.dragDrop();<br />
}<br />
<br />
function handleDragDropEvent(oEvent) {<br />
oEvent.dataTransfer.setData("URL", "http://www.wbex.ru/");<br />
} <br />
</script><br />
</head><br />
<body><br />
<P>Try dragging the red square into another browser window.</p><br />
<P><div style="background-color: red; height: 100px; width: 100px"<br />
onmousemove="handleMouseMove(event)" <br />
ondragstart="handleDragDropEvent(event)">http://www.wbex.ru</div> </p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Table Sort Example==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
The following code is from <br />
Professional JavaScript for Web Developers<br />
by Nicholas C. Zakas<br />
ISBN: 978-0-7645-7908-0<br />
April 2005<br />
http://www.nczonline.net/<br />
For purchase: http://www.amazon.ru/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088<br />
For publisher website: http://www.wrox.ru/WileyCDA/WroxTitle/productCd-0764579088.html<br />
--><br />
<html><br />
<head><br />
<title>Table Sort Example</title><br />
<script type="text/javascript"><br />
<br />
function generateCompareTRs(iCol) {<br />
<br />
return function compareTRs(oTR1, oTR2) {<br />
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;<br />
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;<br />
<br />
return sValue1.localeCompare(sValue2);<br />
};<br />
}<br />
<br />
function sortTable(sTableID, iCol) {<br />
var oTable = document.getElementById(sTableID);<br />
var oTBody = oTable.tBodies[0];<br />
var colDataRows = oTBody.rows;<br />
var aTRs = new Array;<br />
<br />
for (var i=0; i < colDataRows.length; i++) {<br />
aTRs[i] = colDataRows[i];<br />
}<br />
<br />
aTRs.sort(generateCompareTRs(iCol));<br />
<br />
var oFragment = document.createDocumentFragment();<br />
for (var i=0; i < aTRs.length; i++) {<br />
oFragment.appendChild(aTRs[i]);<br />
}<br />
<br />
oTBody.appendChild(oFragment);<br />
}<br />
<br />
</script><br />
</head><br />
<body><br />
<P>Click on the table header to sort in ascending order.</p><br />
<table border="1" id="tblSort"><br />
<thead><br />
<tr><br />
<th onclick="sortTable("tblSort", 0)" style="cursor:pointer">Last Name</th><br />
<th onclick="sortTable("tblSort", 1)" style="cursor:pointer">First Name</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>Smith</td><br />
<td>John</td><br />
</tr><br />
<tr><br />
<td>Johnson</td><br />
<td>Betty</td><br />
</tr><br />
<tr><br />
<td>Henderson</td><br />
<td>Nathan</td><br />
</tr><br />
<tr><br />
<td>Williams</td><br />
<td>James</td><br />
</tr><br />
<tr><br />
<td>Gilliam</td><br />
<td>Michael</td><br />
</tr><br />
<tr><br />
<td>Walker</td><br />
<td>Matthew</td><br />
</tr><br />
</tbody><br />
</table> <br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Table Sort Example 2==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
The following code is from <br />
Professional JavaScript for Web Developers<br />
by Nicholas C. Zakas<br />
ISBN: 978-0-7645-7908-0<br />
April 2005<br />
http://www.nczonline.net/<br />
For purchase: http://www.amazon.ru/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088<br />
For publisher website: http://www.wrox.ru/WileyCDA/WroxTitle/productCd-0764579088.html<br />
--><br />
<html><br />
<head><br />
<title>Table Sort Example</title><br />
<script type="text/javascript"><br />
<br />
function generateCompareTRs(iCol) {<br />
<br />
return function compareTRs(oTR1, oTR2) {<br />
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;<br />
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;<br />
<br />
return sValue1.localeCompare(sValue2);<br />
};<br />
}<br />
<br />
function sortTable(sTableID, iCol) {<br />
var oTable = document.getElementById(sTableID);<br />
var oTBody = oTable.tBodies[0];<br />
var colDataRows = oTBody.rows;<br />
var aTRs = new Array;<br />
<br />
for (var i=0; i < colDataRows.length; i++) {<br />
aTRs[i] = colDataRows[i];<br />
}<br />
<br />
if (oTable.sortCol == iCol) {<br />
aTRs.reverse();<br />
} else {<br />
aTRs.sort(generateCompareTRs(iCol));<br />
}<br />
<br />
var oFragment = document.createDocumentFragment();<br />
for (var i=0; i < aTRs.length; i++) {<br />
oFragment.appendChild(aTRs[i]);<br />
}<br />
<br />
oTBody.appendChild(oFragment);<br />
oTable.sortCol = iCol;<br />
}<br />
<br />
</script><br />
</head><br />
<body><br />
<P>Click on the table header to sort in ascending order.</p><br />
<table border="1" id="tblSort"><br />
<thead><br />
<tr><br />
<th onclick="sortTable("tblSort", 0)" style="cursor:pointer">Last Name</th><br />
<th onclick="sortTable("tblSort", 1)" style="cursor:pointer">First Name</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>Smith</td><br />
<td>John</td><br />
</tr><br />
<tr><br />
<td>Johnson</td><br />
<td>Betty</td><br />
</tr><br />
<tr><br />
<td>Henderson</td><br />
<td>Nathan</td><br />
</tr><br />
<tr><br />
<td>Williams</td><br />
<td>James</td><br />
</tr><br />
<tr><br />
<td>Gilliam</td><br />
<td>Michael</td><br />
</tr><br />
<tr><br />
<td>Walker</td><br />
<td>Matthew</td><br />
</tr><br />
</tbody><br />
</table> <br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Table Sort Example 3==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
The following code is from <br />
Professional JavaScript for Web Developers<br />
by Nicholas C. Zakas<br />
ISBN: 978-0-7645-7908-0<br />
April 2005<br />
http://www.nczonline.net/<br />
For purchase: http://www.amazon.ru/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088<br />
For publisher website: http://www.wrox.ru/WileyCDA/WroxTitle/productCd-0764579088.html<br />
--><br />
<html><br />
<head><br />
<title>Table Sort Example</title><br />
<script type="text/javascript"><br />
<br />
function convert(sValue, sDataType) {<br />
switch(sDataType) {<br />
case "int":<br />
return parseInt(sValue);<br />
case "float":<br />
return parseFloat(sValue);<br />
case "date":<br />
return new Date(Date.parse(sValue));<br />
default:<br />
return sValue.toString();<br />
<br />
}<br />
}<br />
<br />
function generateCompareTRs(iCol, sDataType) {<br />
<br />
return function compareTRs(oTR1, oTR2) {<br />
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);<br />
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);<br />
<br />
if (vValue1 < vValue2) {<br />
return -1;<br />
} else if (vValue1 > vValue2) {<br />
return 1;<br />
} else {<br />
return 0;<br />
}<br />
};<br />
}<br />
<br />
function sortTable(sTableID, iCol, sDataType) {<br />
var oTable = document.getElementById(sTableID);<br />
var oTBody = oTable.tBodies[0];<br />
var colDataRows = oTBody.rows;<br />
var aTRs = new Array;<br />
<br />
for (var i=0; i < colDataRows.length; i++) {<br />
aTRs[i] = colDataRows[i];<br />
}<br />
<br />
if (oTable.sortCol == iCol) {<br />
aTRs.reverse();<br />
} else {<br />
aTRs.sort(generateCompareTRs(iCol, sDataType));<br />
}<br />
<br />
var oFragment = document.createDocumentFragment();<br />
for (var i=0; i < aTRs.length; i++) {<br />
oFragment.appendChild(aTRs[i]);<br />
}<br />
<br />
oTBody.appendChild(oFragment);<br />
oTable.sortCol = iCol;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Click on the table header to sort in ascending order.</p><br />
<table border="1" id="tblSort"><br />
<thead><br />
<tr><br />
<th onclick="sortTable("tblSort", 0)" <br />
style="cursor:pointer">Last Name</th><br />
<th onclick="sortTable("tblSort", 1)" <br />
style="cursor:pointer">First Name</th><br />
<th onclick="sortTable("tblSort", 2, "date")" <br />
style="cursor:pointer">Birthday</th><br />
<th onclick="sortTable("tblSort", 3, "int")" <br />
style="cursor:pointer">Siblings</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>Smith</td><br />
<td>John</td><br />
<td>7/12/1978</td><br />
<td>2</td><br />
</tr><br />
<tr><br />
<td>Johnson</td><br />
<td>Betty</td><br />
<td>10/15/1977</td><br />
<td>4</td><br />
</tr><br />
<tr><br />
<td>Henderson</td><br />
<td>Nathan</td><br />
<td>2/25/1949</td><br />
<td>1</td><br />
</tr><br />
<tr><br />
<td>Williams</td><br />
<td>James</td><br />
<td>7/8/1980</td><br />
<td>4</td><br />
</tr><br />
<tr><br />
<td>Gilliam</td><br />
<td>Michael</td><br />
<td>7/22/1949</td><br />
<td>1</td><br />
</tr><br />
<tr><br />
<td>Walker</td><br />
<td>Matthew</td><br />
<td>1/14/2000</td><br />
<td>3</td><br />
</tr><br />
</tbody><br />
</table> <br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Table Sort Example 4==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
The following code is from <br />
Professional JavaScript for Web Developers<br />
by Nicholas C. Zakas<br />
ISBN: 978-0-7645-7908-0<br />
April 2005<br />
http://www.nczonline.net/<br />
For purchase: http://www.amazon.ru/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088<br />
For publisher website: http://www.wrox.ru/WileyCDA/WroxTitle/productCd-0764579088.html<br />
--><br />
<html><br />
<head><br />
<title>Table Sort Example</title><br />
<script type="text/javascript"><br />
<br />
function convert(sValue, sDataType) {<br />
switch(sDataType) {<br />
case "int":<br />
return parseInt(sValue);<br />
case "float":<br />
return parseFloat(sValue);<br />
case "date":<br />
return new Date(Date.parse(sValue));<br />
default:<br />
return sValue.toString();<br />
<br />
}<br />
}<br />
<br />
function generateCompareTRs(iCol, sDataType) {<br />
<br />
return function compareTRs(oTR1, oTR2) {<br />
var vValue1, vValue2;<br />
<br />
if (oTR1.cells[iCol].getAttribute("value")) {<br />
vValue1 = convert(oTR1.cells[iCol].getAttribute("value"),<br />
sDataType);<br />
vValue2 = convert(oTR2.cells[iCol].getAttribute("value"),<br />
sDataType);<br />
} else {<br />
vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,<br />
sDataType);<br />
vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,<br />
sDataType);<br />
}<br />
<br />
if (vValue1 < vValue2) {<br />
return -1;<br />
} else if (vValue1 > vValue2) {<br />
return 1;<br />
} else {<br />
return 0;<br />
}<br />
};<br />
}<br />
<br />
function sortTable(sTableID, iCol, sDataType) {<br />
var oTable = document.getElementById(sTableID);<br />
var oTBody = oTable.tBodies[0];<br />
var colDataRows = oTBody.rows;<br />
var aTRs = new Array;<br />
<br />
for (var i=0; i < colDataRows.length; i++) {<br />
aTRs[i] = colDataRows[i];<br />
}<br />
<br />
if (oTable.sortCol == iCol) {<br />
aTRs.reverse();<br />
} else {<br />
aTRs.sort(generateCompareTRs(iCol, sDataType));<br />
}<br />
<br />
var oFragment = document.createDocumentFragment();<br />
for (var i=0; i < aTRs.length; i++) {<br />
oFragment.appendChild(aTRs[i]);<br />
}<br />
<br />
oTBody.appendChild(oFragment);<br />
oTable.sortCol = iCol;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Click on the table header to sort.</p><br />
<table border="1" id="tblSort"><br />
<thead><br />
<tr><br />
<th onclick="sortTable("tblSort", 0)" style="cursor:pointer">Type</th><br />
<th onclick="sortTable("tblSort", 1)" style="cursor:pointer">Filename</th> <br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td value="doc"><img src="images/wordicon.gif"/></td><br />
<td>My Resume.doc</td><br />
</tr><br />
<tr><br />
<td value="xls"><img src="images/excelicon.gif"/></td><br />
<td>Fall Budget.xls</td><br />
</tr><br />
<tr><br />
<td value="pdf"><img src="images/acrobaticon.gif"/></td><br />
<td>How to be a better programmer.pdf</td><br />
</tr><br />
<tr><br />
<td value="doc"><img src="images/wordicon.gif"/></td><br />
<td>My Old Resume.doc</td><br />
</tr><br />
<tr><br />
<td value="txt"><img src="images/notepadicon.gif"/></td><br />
<td>Notes from Meeting.txt</td><br />
</tr><br />
<tr><br />
<td value="zip"><img src="images/zippedfoldericon.gif"/></td><br />
<td>Backups.zip</td><br />
</tr><br />
<tr><br />
<td value="xls"><img src="images/excelicon.gif"/></td><br />
<td>Spring Budget.xls</td><br />
</tr><br />
<tr><br />
<td value="doc"><img src="images/wordicon.gif"/></td><br />
<td>Job Description - Web Designer.doc</td><br />
</tr><br />
<tr><br />
<td value="pdf"><img src="images/acrobaticon.gif"/></td><br />
<td>Saved Web Page.pdf</td><br />
</tr><br />
<tr><br />
<td value="doc"><img src="images/wordicon.gif"/></td><br />
<td>Chapter 1.doc</td><br />
</tr><br />
</tbody><br />
</table> <br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Table Sort Example 5==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
The following code is from <br />
Professional JavaScript for Web Developers<br />
by Nicholas C. Zakas<br />
ISBN: 978-0-7645-7908-0<br />
April 2005<br />
http://www.nczonline.net/<br />
For purchase: http://www.amazon.ru/Professional-JavaScript-Developers-Wrox-Guides/dp/0764579088<br />
For publisher website: http://www.wrox.ru/WileyCDA/WroxTitle/productCd-0764579088.html<br />
--><br />
<html><br />
<head><br />
<title>Table Sort Example</title><br />
<script type="text/javascript"><br />
<br />
function compareTRs(oTR1, oTR2) {<br />
var sValue1 = oTR1.cells[0].firstChild.nodeValue;<br />
var sValue2 = oTR2.cells[0].firstChild.nodeValue;<br />
return sValue1.localeCompare(sValue2);<br />
}<br />
<br />
function sortTable(sTableID) {<br />
var oTable = document.getElementById(sTableID);<br />
var oTBody = oTable.tBodies[0];<br />
var colDataRows = oTBody.rows;<br />
var aTRs = new Array;<br />
<br />
for (var i=0; i < colDataRows.length; i++) {<br />
aTRs[i] = colDataRows[i];<br />
}<br />
<br />
aTRs.sort(compareTRs);<br />
<br />
var oFragment = document.createDocumentFragment();<br />
for (var i=0; i < aTRs.length; i++) {<br />
oFragment.appendChild(aTRs[i]);<br />
}<br />
<br />
oTBody.appendChild(oFragment);<br />
}<br />
<br />
</script><br />
</head><br />
<body><br />
<P>Click on the table header to sort in ascending order.</p><br />
<table border="1" id="tblSort"><br />
<thead><br />
<tr><br />
<th onclick="sortTable("tblSort")" style="cursor:pointer">Last Name</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>Smith</td><br />
</tr><br />
<tr><br />
<td>Johnson</td><br />
</tr><br />
<tr><br />
<td>Henderson</td><br />
</tr><br />
<tr><br />
<td>Williams</td><br />
</tr><br />
<tr><br />
<td>Gilliam</td><br />
</tr><br />
<tr><br />
<td>Walker</td><br />
</tr><br />
</tbody><br />
</table> <br />
</body><br />
</html></source></div>