javaspript基础，表格排序和js拖动

表格排序

一、数组排序

例：

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;
	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"            }