表格排序
一、数组排序
例：
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); 直接把比较函数直接传到sort里面
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
}
everse()方法 数组进行反转
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()快得多
表格排序
<table border="1" id="table1">
<thead>
<tr>
<th>first Name</th>
</tr>
</thead>
<tbody>
<tr> <td>zhang</td></tr>
<tr> <td>wang</td></tr>
</tbody>
</table>
====================单列表格排序=====================================
var oTable = document.getElementById(“table1”); //通过表格id获取到对象
var oTbody = oTable.tBodies[0];//获取tbody元素
var colDataRows = oTbody.rows;//得到tbody下所有tr集合
var name = colDataRows[0].cells[0].firstChild.nodeValue;//得到第一个单元格的值
比较函数:
function comparisonTRs(oTR1,oTR2){ //升序，传的两个参数就是tr对象
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
}
因为dom集合不是数组，所以无法使用数组的排序方法，所以我需要将dom元素添加到数组里面
改进二：因为集合没有sort方法
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); } 将文档碎片添加到body中
=======================多列表格排序==============================
<table border="1" id="tblSort">
<thead>
<tr><th onclick="sortTable('tblSort', 0)" style="cursor:pointer">Last Name</th>
<th onclick="sortTable('tblSort', 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>
比较函数生成器： //传送每一列的索引，返回一个比较函数
function genCompareTo(iCol){
return function compareTRs(oTR1,oTR2)
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;//字符串类型
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
return sValue1.localCompare(sValue2); }}//直接有比较方法
定义好这个函数后，就可根据需要排序的列生成相应的比较函数了
var compareTRs = genCompareTo(0);
var compareTRs1 = genCompareTo(1);
var compareTRs2 = genCompareTo(2);
对某列排序
aTRs.sort(genCompareTo(0)); //对第一列排序
aTRs.sort(genCompareTo(1)); //对第二列排序
aTRs.sort(genCompareTo(2)); //对第三列排序
对不同类型表格进行排序
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; }} }
鼠标拖尾
核心代码：
| #div1 { | |
|
| background-color: red; |
|
| height: 100px; |
|
| width: 100px; |
|
| position: absolute; |
|
| } |
必须是绝对定位
<script type="text/javascript">
function handleMouseMove() {
var oEvent = window.event;
var oDiv = document.getElementById("div1");
oDiv.style.left = oEvent.clientX;
oDiv.style.top = oEvent.clientY;
}
</script>
改进核心代码：
var iDiffX=0;//定义两个偏移量
var iDiffY = 0;
function handleMouseDown() {
var oEvent = window.event;
var oDiv = document.getElementById("div1");
iDiffX = oEvent.clientX - oDiv.offsetLeft;//计算鼠标相对于div的偏移量
鼠标的纵坐标位置减去div的纵坐标位置 作为偏移量
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" }
