js表格排序实例详解（支持int,float,date,string四种数据类型）-js教程-PHP中文网

首页

web前端

js教程

js表格排序实例详解（支持int,float,date,string四种数据类型）

Jul 04, 2017 pm 03:17 PM

javascript 支持详解

这篇文章主要介绍了js表格排序实例分析（支持int,float,date,string四种数据类型）,涉及javascript常用的升序、降序及数据类型转换等相关技巧,需要的朋友可以参考下

本文实例讲述了js表格排序的方法。分享给大家供大家参考。具体如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;SortTable2&lt;/title&gt;
&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var k=0;
/**//**************************************************************************
排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID，
需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型)
**************************************************************************/
function sortTable(sTableId,iCol,sDataType)
{
  var oTable=document.getElementById(sTableId);//获取表格的ID 
  var oTbody=oTable.tBodies[0]; //获取表格的tbody
  var colDataRows=oTbody.rows; //获取tbody里的所有行的引用
 
  var aTRs=new Array(); //定义aTRs数组用于存放tbody里的行
  for(var i=0;i&lt;colDataRows.length;i++) //依次把所有行放如aTRs数组
  {
    aTRs.push(colDataRows[i]);
  }
  /**//***********************************************************************
  sortCol属性是额外给table添加的属性，用于作顺反两种顺序排序时的判断，区分
  首次排序和后面的有序反转
  ************************************************************************/
  if(oTable.sortCol==iCol) //非首次排序
  {
    aTRs.reverse();
  }
  else  //首次排序
  {
    if(k%2==0) //升序
    {
      aTRs.sort(generateCompareTRs(iCol,sDataType));
    }
    else if(k%2==1) //降序
    {
      aTRs.sort(generateCompareTRs1(iCol,sDataType));
    }
  }
  var oFragment=document.createDocumentFragment();  //创建文档碎片
  for(var i=0;i&lt;aTRs.length;i++)  //把排序过的aTRs数组成员依次添加到文档碎片
  {
    oFragment.appendChild(aTRs[i]);
  }
  oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新 
  oTable.sortCol=iCol;  //把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1
};
 
//比较函数，用于两项之间的排序
//升序
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&lt;vValue2)
    {
      return -1;
    }
    else if(vValue1&gt;vValue2)
    {
      return 1;
    }
    else
    {
      return 0;
    }
  };
};
//降序
function generateCompareTRs1(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&gt;vValue2)
    {
      return -1;
    }
    else if(vValue1&lt;vValue2)
    {
      return 1;
    }
    else
    {
      return 0;
    }
  };
};
//数据类型转换函数
function convert(sValue,sDataType)
{
  switch(sDataType)
  {
    case &quot;int&quot;:return parseInt(sValue);
    case &quot;float&quot;: return parseFloat(sValue);
    case &quot;date&quot;:return new Date(Date.parse(sValue));
    default:return sValue.toString();
  }
};
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name=&quot;f1&quot; id=&quot;f1&quot; action=&quot;&quot; method=&quot;post&quot;&gt;
&lt;table border=&quot;1&quot; id=&quot;tblSort&quot; sortCol=&quot;-1&quot;&gt;
&lt;thead&gt;
 &lt;tr&gt;
  &lt;th onClick=&quot;sortTable(&#39;tblSort&#39;,0);&quot; style=&quot;cursor:pointer&quot;&gt;Last Name&lt;/th&gt;
  &lt;th onClick=&quot;sortTable(&#39;tblSort&#39;,1)&quot; style=&quot;cursor:pointer&quot;&gt;First Name&lt;/th&gt;
  &lt;th onClick=&quot;sortTable(&#39;tblSort&#39;,2,&#39;date&#39;)&quot; style=&quot;cursor:pointer&quot;&gt;Birthday&lt;/th&gt;
  &lt;th onClick=&quot;sortTable(&#39;tblSort&#39;,3,&#39;int&#39;)&quot; style=&quot;cursor:pointer&quot;&gt;Silbings&lt;/th&gt;
 &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
 &lt;tr&gt;
  &lt;td&gt;Simth&lt;/td&gt;
  &lt;td&gt;John&lt;/td&gt;
  &lt;td&gt;7/12/1978&lt;/td&gt;
  &lt;td&gt;50nGy/h&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td&gt;Johnson&lt;/td&gt;
  &lt;td&gt;Betty&lt;/td&gt;
  &lt;td&gt;5/12/1965&lt;/td&gt;
  &lt;td&gt;20nGy/h&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td&gt;Henderson&lt;/td&gt;
  &lt;td&gt;Nathan&lt;/td&gt;
  &lt;td&gt;10/15/1977&lt;/td&gt;
  &lt;td&gt;130nGy/h&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td&gt;Willianms&lt;/td&gt;
  &lt;td&gt;James&lt;/td&gt;
  &lt;td&gt;2/25/1949&lt;/td&gt;
  &lt;td&gt;10nGy/h&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td&gt;Gilliam&lt;/td&gt;
  &lt;td&gt;Michael&lt;/td&gt;
  &lt;td&gt;7/8/1980&lt;/td&gt;
  &lt;td&gt;140nGy/h&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
  &lt;td&gt;Walker&lt;/td&gt;
  &lt;td&gt;Matthew&lt;/td&gt;
  &lt;td&gt;6/18/1981&lt;/td&gt;
  &lt;td&gt;103nGy/h&lt;/td&gt;
 &lt;/tr&gt;
&lt;/tbody&gt;   
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;