JavaScript Tutorial/GUI Components/Table Sorter
Содержание
Assign mouse move event coordinate to element style
<source lang="javascript">
<html>
<head>
<title>Simulated Drag And Drop Example</title>
<script type="text/javascript">
function handleMouseMove(oEvent) {
var oDiv = document.getElementById("div1");
oDiv.style.left = oEvent.clientX;
oDiv.style.top = oEvent.clientY;
}
</script>
</head>
<body onmousemove="handleMouseMove(event)">
Try moving your mouse around.
Test
</body>
</html></source>
System Drag And Drop Example
<source lang="javascript">
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleMouseMove(oEvent) {
oEvent.srcElement.dragDrop();
}
function handleDragDropEvent(oEvent) {
oEvent.dataTransfer.setData("URL", "http://www.wbex.ru/");
}
</script>
</head>
<body>
Try dragging the red square into another browser window.
</body>
</html></source>
Table Sort Example
<source lang="javascript">
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
function generateCompareTRs(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, iCol) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
aTRs.sort(generateCompareTRs(iCol));
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
}
</script>
</head>
<body>
Click on the table header to sort in ascending order.
| Last Name | First Name |
|---|---|
| Smith | John |
| Johnson | Betty |
| Henderson | Nathan |
| Williams | James |
| Gilliam | Michael |
| Walker | Matthew |
</body>
</html></source>
Table Sort Example 2
<source lang="javascript">
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
function generateCompareTRs(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, iCol) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
</head>
<body>
Click on the table header to sort in ascending order.
| Last Name | First Name |
|---|---|
| Smith | John |
| Johnson | Betty |
| Henderson | Nathan |
| Williams | James |
| Gilliam | Michael |
| Walker | Matthew |
</body>
</html></source>
Table Sort Example 3
<source lang="javascript">
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
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();
}
}
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
</head>
<body>
Click on the table header to sort in ascending order.
| Last Name | First Name | Birthday | Siblings |
|---|---|---|---|
| Smith | John | 7/12/1978 | 2 |
| Johnson | Betty | 10/15/1977 | 4 |
| Henderson | Nathan | 2/25/1949 | 1 |
| Williams | James | 7/8/1980 | 4 |
| Gilliam | Michael | 7/22/1949 | 1 |
| Walker | Matthew | 1/14/2000 | 3 |
</body>
</html></source>
Table Sort Example 4
<source lang="javascript">
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
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();
}
}
function generateCompareTRs(iCol, sDataType) {
return function compareTRs(oTR1, oTR2) {
var vValue1, vValue2;
if (oTR1.cells[iCol].getAttribute("value")) {
vValue1 = convert(oTR1.cells[iCol].getAttribute("value"),
sDataType);
vValue2 = convert(oTR2.cells[iCol].getAttribute("value"),
sDataType);
} else {
vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,
sDataType);
vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,
sDataType);
}
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};
}
function sortTable(sTableID, iCol, sDataType) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
if (oTable.sortCol == iCol) {
aTRs.reverse();
} else {
aTRs.sort(generateCompareTRs(iCol, sDataType));
}
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
</head>
<body>
Click on the table header to sort.
| Type | Filename |
|---|---|
| <img src="images/wordicon.gif"/> | My Resume.doc |
| <img src="images/excelicon.gif"/> | Fall Budget.xls |
| <img src="images/acrobaticon.gif"/> | How to be a better programmer.pdf |
| <img src="images/wordicon.gif"/> | My Old Resume.doc |
| <img src="images/notepadicon.gif"/> | Notes from Meeting.txt |
| <img src="images/zippedfoldericon.gif"/> | Backups.zip |
| <img src="images/excelicon.gif"/> | Spring Budget.xls |
| <img src="images/wordicon.gif"/> | Job Description - Web Designer.doc |
| <img src="images/acrobaticon.gif"/> | Saved Web Page.pdf |
| <img src="images/wordicon.gif"/> | Chapter 1.doc |
</body>
</html></source>
Table Sort Example 5
<source lang="javascript">
<html>
<head>
<title>Table Sort Example</title>
<script type="text/javascript">
function compareTRs(oTR1, oTR2) {
var sValue1 = oTR1.cells[0].firstChild.nodeValue;
var sValue2 = oTR2.cells[0].firstChild.nodeValue;
return sValue1.localeCompare(sValue2);
}
function sortTable(sTableID) {
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i < colDataRows.length; i++) {
aTRs[i] = colDataRows[i];
}
aTRs.sort(compareTRs);
var oFragment = document.createDocumentFragment();
for (var i=0; i < aTRs.length; i++) {
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
}
</script>
</head>
<body>
Click on the table header to sort in ascending order.
| Last Name |
|---|
| Smith |
| Johnson |
| Henderson |
| Williams |
| Gilliam |
| Walker |
</body>
</html></source>
