您的当前位置:首页正文

javascript表格排序和表头浮动效果(扩展SortTable)_javascript技巧

2023-12-02 来源:帮我找美食网

一、SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add

假定表格的元素id为person-list,奇数行的class名为odd。 请实现如下功能:

1、选中单选框,点击删除时对应行消失;
2、点击排序时,按照升序对表格中的每一行进行排序;
3、点击筛选,籍贯处会变成一个下拉框,选项值为当前表格中锁包含的省份名称,选中某个省份,展示对应省份的人员信息

实现代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>人员信息表格</title> <style type="text/css"> body { font-family: "arial", sans-serif; } #person-list { width: 80%; margin-left: 10%; margin-right: 10%; } #person-list thead { font-weight: bold; } #person-list button { background-color: transparent; border: 0; font-weight: bold; font-size: small; padding-left: 0; color: #6ba9ee; } #person-list thead tr td { border-bottom: 1px #ccc solid; } #person-list tbody tr td:nth-child(2) { font-weight: bold; } #person-list tbody tr td { border-top: 1px #ccc solid; padding-top: 5px; padding-bottom: 5px; } #person-list tbody tr:nth-child(2n+1) { background-color: #eee; } </style> <script type="text/javascript"> window.onload=function(){ if (!document.getElementsByClassName) {//由于较低版本的IE不识别这个。 document.getElementsByClassName=function(cls){ var ret=[]; var eles=document.getElementsByTagName('*'); for(var i=0,len=eles.length;i<len;i++){//indexOf()返回的是字母在字符串中的下标,>=0代表存在 if (eles[i].className===cls /*===是严格等于*/ ||eles[i].className.indexOf(cls+'')>=0//当比较'aaa'和'aaa '时 ||eles[i].className.indexOf(''+cls+'')>=0///比较'aaa'和'bbb aaa ccc'时 ||eles[i].className.indexOf(''+cls)>=0///比较'aaa'和' aaa'时 ) { ret.push(eles[i]); } } return ret; } } var checks = document.getElementsByTagName('input'); var tbody = document.getElementsByTagName("tbody")[0]; var trs = tbody.getElementsByTagName('tr'); var remove = document.getElementById("remove"); var sort = document.getElementById("sort"); var select = document.getElementById("select"); remove.onclick = function(){ //删除选中行 for(var i = checks.length-1; i >= 0;i--){ //因为removeChild的时候,长度会变化,所以不能以小于length作为判断条件,应该从后往前扫描 if(checks[i].checked){ tbody.removeChild(checks[i].parentNode.parentNode); } } //修改序号 for(var i = 0;i < trs.length; i++){ var td=trs[i].getElementsByTagName("td")[1]; td.innerHTML=i+1; } }; sort.onclick=function(){ //循环遍历,后面比它小的就插入到它前面去 for(var i=0;i < trs.length; i++){ var td=trs[i].getElementsByTagName("td")[3]; for(var j=i;j < trs.length;j++){ var tdd=trs[j].getElementsByTagName("td")[3]; if((td.innerHTML - tdd.innerHTML)>0){ td.parentNode.parentNode.insertBefore(tdd.parentNode,td.parentNode); } } } //修改序号 for(var i=0;i < trs.length;i++){ var td=trs[i].getElementsByTagName("td")[1]; td.innerHTML=i+1; } }; select.onclick=function(){ //如果已经筛选过,页面中有下拉框了就不要再执行此函数了。 if(document.getElementsByTagName('select').length>0) return false; var provinces = []; //把所有的省份取出来,存放到数组里 for(var i=0;i < trs.length;i++){ var td=trs[i].getElementsByTagName("td")[4]; var prov=td.innerHTML; provinces.push(prov); } //去重 for(var j=0;j< provinces.length;j++){ for(var k=provinces.length;k>j;k--){ //同理,因为长度会发生变化,所以从后往前算 if(provinces[j] === provinces[k]){ provinces.splice(k,1); } } } //创建selectElem下拉框元素,option为省份 var selectElem = document.createElement("select"); for(var z = 0;z < provinces.length;z++){ var option=document.createElement("option"); option.innerHTML=provinces[z]; option.value=provinces[z]; selectElem.appendChild(option); } var childNodes=select.parentNode.childNodes; //去掉籍贯两个字 for(var x= 0; x< childNodes.length;x++){ if(childNodes[x].nodeType === 3){ childNodes[x].parentNode.removeChild(childNodes[x]); } } //在按钮之前插入select下拉框 select.parentNode.insertBefore(selectElem,select); //监控下拉框的option的点击事件,注意是下拉框的onchange,而不是option的onclick selectElem.onchange = function(){ for(var i =0 ;i< trs.length;i++){ trs[i].style.display="none" ; if(trs[i].getElementsByTagName("td")[4].innerHTML == selectElem.value){ trs[i].style.display = ""; } } }; };} </script></head><body> <table id="person-list"> <thead> <tr> <td> <button id="remove">删除</button> </td> <td>序号</td> <td>姓名</td> <td>年龄 <button id="sort">排序</button> </td> <td>籍贯 <button id="select">筛选</button> </td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"/> </td> <td>1</td> <td>张三</td> <td>24</td> <td>北京</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>2</td> <td>李斯</td> <td>43</td> <td>陕西</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>3</td> <td>韩信</td> <td>49</td> <td>湖北</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>4</td> <td>宋江</td> <td>43</td> <td>山东</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>5</td> <td>李逵</td> <td>38</td> <td>青海</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>6</td> <td>林冲</td> <td>42</td> <td>北京</td> </tr> </tbody> </table></body></html>

JS怎么实现表格排序功能实例

页面中如下格式的人员信息表格:

1.png

表格每行的HTML结构为:

<tr> <td><input type="checkbox"></td> <td>2</td> <td>李斯</td> <td>43</td> <td>陕西</td></tr>

假定表格的元素id为person-list,奇数行的class名为odd。 请实现如下功能:

1、选中单选框,点击删除时对应行消失;
2、点击排序时,按照升序对表格中的每一行进行排序;
3、点击筛选,籍贯处会变成一个下拉框,选项值为当前表格中锁包含的省份名称,选中某个省份,展示对应省份的人员信息

实现代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>人员信息表格</title> <style type="text/css"> body { font-family: "arial", sans-serif; } #person-list { width: 80%; margin-left: 10%; margin-right: 10%; } #person-list thead { font-weight: bold; } #person-list button { background-color: transparent; border: 0; font-weight: bold; font-size: small; padding-left: 0; color: #6ba9ee; } #person-list thead tr td { border-bottom: 1px #ccc solid; } #person-list tbody tr td:nth-child(2) { font-weight: bold; } #person-list tbody tr td { border-top: 1px #ccc solid; padding-top: 5px; padding-bottom: 5px; } #person-list tbody tr:nth-child(2n+1) { background-color: #eee; } </style> <script type="text/javascript"> window.onload=function(){ if (!document.getElementsByClassName) {//由于较低版本的IE不识别这个。 document.getElementsByClassName=function(cls){ var ret=[]; var eles=document.getElementsByTagName('*'); for(var i=0,len=eles.length;i<len;i++){//indexOf()返回的是字母在字符串中的下标,>=0代表存在 if (eles[i].className===cls /*===是严格等于*/ ||eles[i].className.indexOf(cls+'')>=0//当比较'aaa'和'aaa '时 ||eles[i].className.indexOf(''+cls+'')>=0///比较'aaa'和'bbb aaa ccc'时 ||eles[i].className.indexOf(''+cls)>=0///比较'aaa'和' aaa'时 ) { ret.push(eles[i]); } } return ret; } } var checks = document.getElementsByTagName('input'); var tbody = document.getElementsByTagName("tbody")[0]; var trs = tbody.getElementsByTagName('tr'); var remove = document.getElementById("remove"); var sort = document.getElementById("sort"); var select = document.getElementById("select"); remove.onclick = function(){ //删除选中行 for(var i = checks.length-1; i >= 0;i--){ //因为removeChild的时候,长度会变化,所以不能以小于length作为判断条件,应该从后往前扫描 if(checks[i].checked){ tbody.removeChild(checks[i].parentNode.parentNode); } } //修改序号 for(var i = 0;i < trs.length; i++){ var td=trs[i].getElementsByTagName("td")[1]; td.innerHTML=i+1; } }; sort.onclick=function(){ //循环遍历,后面比它小的就插入到它前面去 for(var i=0;i < trs.length; i++){ var td=trs[i].getElementsByTagName("td")[3]; for(var j=i;j < trs.length;j++){ var tdd=trs[j].getElementsByTagName("td")[3]; if((td.innerHTML - tdd.innerHTML)>0){ td.parentNode.parentNode.insertBefore(tdd.parentNode,td.parentNode); } } } //修改序号 for(var i=0;i < trs.length;i++){ var td=trs[i].getElementsByTagName("td")[1]; td.innerHTML=i+1; } }; select.onclick=function(){ //如果已经筛选过,页面中有下拉框了就不要再执行此函数了。 if(document.getElementsByTagName('select').length>0) return false; var provinces = []; //把所有的省份取出来,存放到数组里 for(var i=0;i < trs.length;i++){ var td=trs[i].getElementsByTagName("td")[4]; var prov=td.innerHTML; provinces.push(prov); } //去重 for(var j=0;j< provinces.length;j++){ for(var k=provinces.length;k>j;k--){ //同理,因为长度会发生变化,所以从后往前算 if(provinces[j] === provinces[k]){ provinces.splice(k,1); } } } //创建selectElem下拉框元素,option为省份 var selectElem = document.createElement("select"); for(var z = 0;z < provinces.length;z++){ var option=document.createElement("option"); option.innerHTML=provinces[z]; option.value=provinces[z]; selectElem.appendChild(option); } var childNodes=select.parentNode.childNodes; //去掉籍贯两个字 for(var x= 0; x< childNodes.length;x++){ if(childNodes[x].nodeType === 3){ childNodes[x].parentNode.removeChild(childNodes[x]); } } //在按钮之前插入select下拉框 select.parentNode.insertBefore(selectElem,select); //监控下拉框的option的点击事件,注意是下拉框的onchange,而不是option的onclick selectElem.onchange = function(){ for(var i =0 ;i< trs.length;i++){ trs[i].style.display="none" ; if(trs[i].getElementsByTagName("td")[4].innerHTML == selectElem.value){ trs[i].style.display = ""; } } }; };} </script></head><body> <table id="person-list"> <thead> <tr> <td> <button id="remove">删除</button> </td> <td>序号</td> <td>姓名</td> <td>年龄 <button id="sort">排序</button> </td> <td>籍贯 <button id="select">筛选</button> </td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"/> </td> <td>1</td> <td>张三</td> <td>24</td> <td>北京</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>2</td> <td>李斯</td> <td>43</td> <td>陕西</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>3</td> <td>韩信</td> <td>49</td> <td>湖北</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>4</td> <td>宋江</td> <td>43</td> <td>山东</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>5</td> <td>李逵</td> <td>38</td> <td>青海</td> </tr> <tr> <td><input type="checkbox"/> </td> <td>6</td> <td>林冲</td> <td>42</td> <td>北京</td> </tr> </tbody> </table></body></html>

JS,实现表格内容排序

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>main.html</title>
<style type="text/css">
table {
width: 300px; border : 1px solid black;
border-collapse: collapse;
border: 1px solid black;
}

td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
function paiXu ()
{
var tabNode = document.getElementsByTagName ("table")[0];
var trs = tabNode.rows;
var arr = new Array;
for ( var x = 0; x < trs.length; x++)
{
arr.push (trs[x]);
}
sortt (arr);
for ( var x = 0; x < arr.length; x++)
{
tabNode.tBodies[0].appendChild (arr[x]);
}
}

function sortt (arr)
{
for ( var x = 0; x < arr.length; x++)
{
for ( var y = x + 1; y < arr.length; y++)
{
if (parseInt (arr[x].cells[1].childNodes[0].nodeValue) <= parseInt (arr[y].cells[1].childNodes[0].nodeValue))
{
var tmp = arr[x];
arr[x] = arr[y];
arr[y] = tmp;
}
}
}
}
</script>
</head>

<body>
<input type="button" value="排序" onclick="paiXu()">
<table>
<tr>
<td>小明</td>
<td>23</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小花</td>
<td>21</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小高</td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小林</td>
<td>25</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小王</td>
<td>35</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

JS,实现表格内容排序

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>main.html</title>
<style type="text/css">
table {
width: 300px; border : 1px solid black;
border-collapse: collapse;
border: 1px solid black;
}

td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
function paiXu ()
{
var tabNode = document.getElementsByTagName ("table")[0];
var trs = tabNode.rows;
var arr = new Array;
for ( var x = 0; x < trs.length; x++)
{
arr.push (trs[x]);
}
sortt (arr);
for ( var x = 0; x < arr.length; x++)
{
tabNode.tBodies[0].appendChild (arr[x]);
}
}

function sortt (arr)
{
for ( var x = 0; x < arr.length; x++)
{
for ( var y = x + 1; y < arr.length; y++)
{
if (parseInt (arr[x].cells[1].childNodes[0].nodeValue) <= parseInt (arr[y].cells[1].childNodes[0].nodeValue))
{
var tmp = arr[x];
arr[x] = arr[y];
arr[y] = tmp;
}
}
}
}
</script>
</head>

<body>
<input type="button" value="排序" onclick="paiXu()">
<table>
<tr>
<td>小明</td>
<td>23</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小花</td>
<td>21</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小高</td>
<td>12</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小林</td>
<td>25</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>小王</td>
<td>35</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

sorttable.js怎么用1

用sorttable.js对表格进行排序
首先在布局文件的开始导入该js
然后只需要在 table标签添加一个class="sortable"就一切OK了
这样就实现了表格的正反序的排列

sorttable.js怎么用1

用sorttable.js对表格进行排序
首先在布局文件的开始导入该js
然后只需要在 table标签添加一个class="sortable"就一切OK了
这样就实现了表格的正反序的排列

Web前端工程师应该知道的提高JavaScript技能的技巧!

今天小编要跟大家分享的文章是关于Web前端工程师应该知道的提高JavaScript

技能的技巧!熟悉web前端工作的小伙伴都知道,JavaScript是前端工程师的必备技能。JavaScript

是一种复杂的语言。如果是你是高级或者初级web开发人员,了解它的基本概念非常重要。本篇文章小编就为大家介绍几种提高JavaScript

技能的技巧,下面让我们一起来看一看吧!

01、变量赋值(值vs引用)

理解JavaScript如何给变量赋值可以帮助我们减少一些不必要的bug。如果你不理解这一点,可能很容易地编写被无意中更改值的代码。

JavaScript总是按照值来给变量赋值。这一部分非常重要:当指定的值是JavaScript的五种基本类型之一(即

Boolean,null,undefined,String和Number)时,将分配实际值。但是,当指定的值是

Array,Function或Object时,将分配对内存中对象的引用给变量。

在以下代码段中,使用var1对var2进行赋值。由于var1是基本类型(String),因此var2的值等于var1的String

值,并且可以认为此时与var1完全不同。因此,重新赋值var2对var1没有影响。

letvar1='Mystring';

letvar2=var1;

var2='Mynewstring';

console.log(var1);

//'Mystring'

console.log(var2);

//'Mynewstring'

接着,与对象赋值进行比较。

letvar1={name:'Jim'}

letvar2=var1;

var2.name='John';

console.log(var1);

//{name:'John'}

console.log(var2);

//{name:'John'}

如果你期望它会像原始类型赋值那样,很可能会出问题!如果你创建了一个无意中会改变对象的函数,就会出现一些非预期的行为。

02、闭包

闭包是一个重要的JavaScript模式,可以私有访问变量。在本例中,createGreeter返回一个匿名函数,这个函数可以访问参数

greeting(在这里是“Hello”)。在后续的调用中,sayHello将有权访问这个greeting!

functioncreateGreeter(greeting){

returnfunction(name){

console.log(greeting+','+name);

}

}

constsayHello=createGreeter('Hello');

sayHello('Joe');

//Hello,Joe

在更真实的场景中,你可以设想一个初始函数apiConnect(apiKey),它返回一些使用APIkey的方法。在这种情况下,apiKey

只需要提供一次即可。

functionapiConnect(apiKey){

functionget(route){

returnfetch(`${route}?key=${apiKey}`);

}

functionpost(route,params){

returnfetch(route,{

method:'POST',

body:JSON.stringify(params),

headers:{

'Authorization':`Bearer${apiKey}`

}

})

}

return{get,post}

}

constapi=apiConnect('my-secret-key');

//NoneedtoincludetheapiKeyanymore

api.get('#/get-endpoint');

api.post('#/post-endpoint',{name:'Joe'});

03、解构

JavaScript参数解构可以从对象中干中提取所需属性的常用方法。

constobj={

ame:'Joe',

food:'cake'

}

const{name,food}=obj;

console.log(name,food);

//'Joe''cake'

如果要以其他名称提取属性,可以使用如下方式:

constobj={

ame:'Joe',

food:'cake'

}

const{name:myName,food:myFood}=obj;

console.log(myName,myFood);

//'Joe''cake'

解构经常也用于直接用于提取传给函数的参数。如果你熟悉React,可能已经见过这个:

constperson={

ame:'Eddie',

age:24

}

functionintroce({name,age}){

console.log(`I'm${name}andI'm${age}yearsold!`);

}

console.log(introce(person));

//"I'mEddieandI'm24yearsold!"

04、展开运算

ES6的一个常用之一的特性就是展开(...)运算符了,在下面的例子中,Math.max不能应用于arr

数组,因为它不将数组作为参数,但它可以将各个元素作为参数传入。展开运算符...可用于提取数组的各个元素。

constarr=[4,6,-1,3,10,4];

constmax=Math.max(...arr);

console.log(max);

//10

05、剩余参数

剩余参数语法和展开语法看起来的一样的,不同的是展开语法是为了结构数组和对象;而剩余参数和展开运算符是相反的,剩余参数收集多个元素合成一个数组。

functionmyFunc(...args){

console.log(args[0]+args[1]);

}

myFunc(1,2,3,4);

//3

restparameters和arguments的区别

1.arguments是伪数组,包含所有的实参

2.剩余参数是标准的数组,可以使用数组的方法

06、数组方法

JavaScript数组方法通常可以提供令人难以置信的、优雅的方法来执行所需的数据转换。作为StackOverflow

的贡献者,我经常看到关于如何以某种方式操纵对象数组的问题,这往往也是数组方法的完美用例。

map、filter、rece

JavaScript数组方法map、filter和rece容易混淆,这些都是转换数组或返回聚合值的有用方法。

map:返回一个数组,其中每个元素都使用指定函数进行过转换。

constarr=[1,2,3,4,5,6];

constmapped=arr.map(el=>el+20);

console.log(mapped);

//[21,22,23,24,25,26]

filter:返回一个数组,只有当指定函数返回true时,相应的元素才会被包含在这个数组中。

constarr=[1,2,3,4,5,6];

constfiltered=arr.filter(el=>el===2||el===4);

console.log(filtered);

//[2,4]

rece:按函数中指定的值累加

constarr=[1,2,3,4,5,6];

constreced=arr.rece((total,current)=>total+current);

console.log(reced);

//21

find,findIndex,indexOf

find:返回与指定条件匹配的第一个实例,如果查到不会继续查找其他匹配的实例。

constarr=[1,2,3,4,5,6,7,8,9,10];

constfound=arr.find(el=>el>5);

console.log(found);

//6

再次注意,虽然5之后的所有元素都满足条件,但是只返回第一个匹配的元素。当你发现匹配项时,通常会中断for循环,在这种情况下,这实际上非常有用。

findIndex:这与find几乎完全相同,但不是返回第一个匹配元素,而是返回第一个匹配元素的索引。

constarr=['Nick','Frank','Joe','Frank'];

constfoundIndex=arr.findIndex(el=>el==='Frank');

console.log(foundIndex);

//1

indexOf:与findIndex几乎完全相同,但它不是将函数作为参数,而是采用一个简单的值。

当w你需要更简单的逻辑并且不需要使用函数来检查是否存在匹配时,可以使用此方法。

constarr=['Nick','Frank','Joe','Frank'];

constfoundIndex=arr.indexOf('Frank');

console.log(foundIndex);

//1

push,pop,shift,unshift

push:这是一个相对简单的方法,它将一个项添加到数组的末尾。它就地修改数组,函数本身会返回添加到数组中的项。

letarr=[1,2,3,4];

constpushed=arr.push(5);

console.log(arr);

//[1,2,3,4,5]

console.log(pushed);

//5

pop:这将从数组中删除最后一项。同样,它在适当的位置修改数组,函数本身返回从数组中删除的项。

letarr=[1,2,3,4];

constpopped=arr.pop();

console.log(arr);

//[1,2,3]

console.log(popped);

//4

shift:从数组中删除第一项。同样,它在适当的位置修改数组。函数本身返回从数组中删除的项。

letarr=[1,2,3,4];

constshifted=arr.shift();

console.log(arr);

//[2,3,4]

console.log(shifted);

//1

unshift:将一个或多个元素添加到数组的开头。同样,它在适当的位置修改数组。与许多其他方法不同,函数本身返回数组的新长度。

letarr=[1,2,3,4];

constunshifted=arr.unshift(5,6,7);

console.log(arr);

//[5,6,7,1,2,3,4]

console.log(unshifted);

//7

splice,slice

splice:通过删除或替换现有元素和/或添加新元素来更改数组的内容,此方法会修改了数组本身。

下面的代码示例的意思是:在数组的位置1上删除0个元素,并插入b。

letarr=['a','c','d','e'];

arr.splice(1,0,'b')

slice:从指定的起始位置和指定的结束位置之前返回数组的浅拷贝。如果未指定结束位置,则返回数组的其余部分。

重要的是,此方法不会修改数组,而是返回所需的子集。

letarr=['a','b','c','d','e'];

constsliced=arr.slice(2,4);

console.log(sliced);

//['c','d']

console.log(arr);

//['a','b','c','d','e']

sort

sort:根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或0,则顺序保持不变。如果返回正数,则交换元素顺序。

letarr=[1,7,3,-1,5,7,2];

constsorter=(firstEl,secondEl)=>firstEl-secondEl;

arr.sort(sorter);

console.log(arr);

//[-1,1,2,3,5,7,7]

07、Generators(生成器)

生成器是一种特殊的行为,实际上是一种设计模式,我们通过调用next()方法来遍历一组有序的值。想象一下,例如使用遍历器对数组[1,2,3,4,5]进行遍历。第一次调用next()方法返回1,第二次调用next()方法返回2,以此类推。当数组中的所有值都返回后,调用next()方法将返回null或false或其它可能的值用来表示数组中的所有元素都已遍历完毕。

function*greeter(){

yield'Hi';

yield'Howareyou?';

yield'Bye';

}

constgreet=greeter();

console.log(greet.next().value);

//'Hi'

console.log(greet.next().value);

//'Howareyou?'

console.log(greet.next().value);

//'Bye'

console.log(greet.next().value);

//undefined

使用生成器生成无限个值:

function*idCreator(){

leti=0;

while(true)

yieldi++;

}

constids=idCreator();

console.log(ids.next().value);

//0

console.log(ids.next().value);

//1

console.log(ids.next().value);

//2

//etc...

08、恒等运算符(===)与相等运算符(==)

大家一定要知道JavaScript中的恒等运算符(===)和相等运算符(==)之间的区别!

==运算符在比较值之前会进行类型转换,而===运算符在比较之前不会进行任何类型转换。

console.log(0=='0');

//true

console.log(0==='0');

//false

09、对象比较

我看到JavaScript新手所犯的错误是直接比较对象。变量指向内存中对象的引用,而不是对象本身!实际比较它们的一种方法是将对象转换为JSON

字符串。这有一个缺点:对象属性顺序不能保证!比较对象的一种更安全的方法是引入专门进行深度对象比较的库(例如,lodash的isEqual)。

下面的对象看起来是相等的,但实际上它们指向不同的引用。

constjoe1={name:'Joe'};

constjoe2={name:'Joe'};

console.log(joe1===joe2);

//false

相反,下面的计算结果为true,因为一个对象被设置为与另一个对象相等,因此指向相同的引用(内存中只有一个对象)。

constjoe1={name:'Joe'};

constjoe2=joe1;

console.log(joe1===joe2);

//true

相反,以下计算结果为true,因为一个对象设置为等于另一个对象,因此指向相同的引用(内存中只有一个对象)。

constjoe1={name:'Joe'};

constjoe2=joe1;

console.log(joe1===joe2);

//true

10、回调函数

很多人都被JavaScript回调函数吓倒了!他们很简单,举个例子。console.log函数作为回调传递给myFunc。

它在setTimeout完成时执行。

functionmyFunc(text,callback){

setTimeout(function(){

callback(text);

},2000);

}

myFunc('Helloworld!',console.log);

//'Helloworld!'

11、Promises

一旦你理解了JavaScript回调,很快就会发现自己陷入了“回调地狱”中。这个时候可以使用promise,将异步逻辑包装在promise

中,成功时resolve或在失败时reject使用“then”来处理成功的情况,使用catch来处理异常。

constmyPromise=newPromise(function(res,rej){

setTimeout(function(){

if(Math.random()<0.9){

returnres('Hooray!');

}

returnrej('Ohno!');

},1000);

});

myPromise

.then(function(data){

console.log('Success:'+data);

})

.catch(function(err){

console.log('Error:'+err);

});

//IfMath.random()returnslessthan0.9thefollowingislogged:

//"Success:Hooray!"

//IfMath.random()returns0.9orgreaterthefollowingislogged:

//"Error:Onno!"

12、Async/Await

在掌握了promise的用法后,你可能也会喜欢asyncawait,它只是一种基于promise

的“语法糖”。在下面的示例中,我们创建了一个async函数,并awaitgreeterpromise。

constgreeter=newPromise((res,rej)=>{

setTimeout(()=>res('Helloworld!'),2000);

})

asyncfuncti

制作网页时表格排列的问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">*{font-size:14px}button{margin:3px}</style>
<script type="text/javascript">

var mytable=null,mytable2=null;

window.onload=function(){
mytable=new CTable("tbl",10);
mytable2=new CTable("tbl2",6);
}

Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}

function $A(arrayLike){
for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);
return ret
}

Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}

function CTable(id,rows){
this.tbl=typeof(id)=="string"?document.getElementById(id):id;
if (rows && /^\d+$/.test(rows)) this.addrows(rows)
}

CTable.prototype={
addrows:function(n){ //随机添加n个tr
new Array(n).each(this.add.bind(this))
},
add:function(){ //添加1个tr
var self=this;
var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1);
var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute("width","35")
td2.innerHTML=Math.ceil(Math.random()*9)
td3.innerHTML=Math.ceil(Math.random()*9)
},
del:function(){ //删除所选tr
var self=this
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
},
up:function(){ //上移所选tr
var self=this
var upOne=function(tr){ //上移1个tr
if (tr.rowIndex>0){
self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])
self.getChkBox(tr).checked=true
}
}
var arr=$A(self.tbl.rows).reverse()
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});
},
down:function(){
var self=this
var downOne=function(tr){
if (tr.rowIndex<self.tbl.rows.length-1) {
self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);
self.getChkBox(tr).checked=true;
}
}
var arr=$A(self.tbl.rows)

if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});
},
sort:function(){ //排序
var self=this,order=arguments[0];
var sortBy=function(a,b){
if (typeof(order)=="number"){ //数字,则按数字指示的列排序
return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1; //转化为数字类型比较大小
}else if (typeof(order)=="function"){ //为程序,按 程序的返回结果排序
return order(a,b);
}else{
return 1;
}
}
$A(self.tbl.rows).sort(sortBy).each(function(x){
var checkStatus=self.getChkBox(x).checked;
self.tbl.firstChild.appendChild(x);
if (checkStatus) self.getChkBox(x).checked=checkStatus;
});
},
rnd:function(){ //随即选择几行tr
var self=this,selmax=0,tbl=self.tbl;
if (tbl.rows.length){
selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //选择的行数不超过tr数的1/4
$A(tbl.rows).each(function(x){
self.getChkBox(x).checked=false;
self.restoreBgColor(x)
})
}else{
return alert("无数据可以选")
}
new Array(selmax).each(function(){
var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]
self.getChkBox(tr).checked=true;
self.highlight({target:self.getChkBox(tr)})
})
},
highlight:function(){ //设置tr的背景色
var self=this;
var evt=arguments[0] || window.event
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)
},
swapTr:function(tr1,tr2){ //交换tr1和tr2的位置
var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;
var tBody=tr1.parentNode
tBody.replaceChild(tr2,tr1);
tBody.insertBefore(tr1,target);
},
getChkBox:function(tr){ //从tr得到 checkbox对象
return tr.cells[0].firstChild
},
restoreBgColor:function(tr){
tr.style.backgroundColor="#ffffff"
},
setBgColor:function(tr){
tr.style.backgroundColor="#c0c0c0"
}
}

function f(a,b){
var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};
return sumRow(a)>sumRow(b)?1:-1;
}

</script>

</head>
<body>

<button onClick="javascript:mytable.rnd()">随机选择行</button>
<button onClick="javascript:mytable.add()">添加一行</button>
<button onClick="javascript:mytable.del()">删除选定行</button>
<button onClick="javascript:mytable.up()">上移选定行</button>
<button onClick="javascript:mytable.down()">下移选定行</button>
<button onClick="javascript:mytable.sort(1)">按第一列数字排序</button>
<button onClick="javascript:mytable.sort(f)">按每行数据的和排序</button>
<br/><br/>
<table width=100%>
<tr>
<td valign="top"><table border id="tbl" width="80%"></table></td>
<td valign="top"><table border id="tbl2" width="80%"></table></td>
</tr>
</table>
<br/><br/>
<button onClick="javascript:mytable2.rnd()">随机选择行</button>
<button onClick="javascript:mytable2.add()">添加一行</button>
<button onClick="javascript:mytable2.del()">删除选定行</button>
<button onClick="javascript:mytable2.up()">上移选定行</button>
<button onClick="javascript:mytable2.down()">下移选定行</button>
<button onClick="javascript:mytable2.sort(2)">按第二列数字排序</button>
<button onClick="javascript:mytable2.sort(f)">按每行数据的和排序</button>

</body>
</html>

制作网页时表格排列的问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">*{font-size:14px}button{margin:3px}</style>
<script type="text/javascript">

var mytable=null,mytable2=null;

window.onload=function(){
mytable=new CTable("tbl",10);
mytable2=new CTable("tbl2",6);
}

Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}

function $A(arrayLike){
for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);
return ret
}

Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}

function CTable(id,rows){
this.tbl=typeof(id)=="string"?document.getElementById(id):id;
if (rows && /^\d+$/.test(rows)) this.addrows(rows)
}

CTable.prototype={
addrows:function(n){ //随机添加n个tr
new Array(n).each(this.add.bind(this))
},
add:function(){ //添加1个tr
var self=this;
var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1);
var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute("width","35")
td2.innerHTML=Math.ceil(Math.random()*9)
td3.innerHTML=Math.ceil(Math.random()*9)
},
del:function(){ //删除所选tr
var self=this
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
},
up:function(){ //上移所选tr
var self=this
var upOne=function(tr){ //上移1个tr
if (tr.rowIndex>0){
self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])
self.getChkBox(tr).checked=true
}
}
var arr=$A(self.tbl.rows).reverse()
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});
},
down:function(){
var self=this
var downOne=function(tr){
if (tr.rowIndex<self.tbl.rows.length-1) {
self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);
self.getChkBox(tr).checked=true;
}
}
var arr=$A(self.tbl.rows)

if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});
},
sort:function(){ //排序
var self=this,order=arguments[0];
var sortBy=function(a,b){
if (typeof(order)=="number"){ //数字,则按数字指示的列排序
return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1; //转化为数字类型比较大小
}else if (typeof(order)=="function"){ //为程序,按 程序的返回结果排序
return order(a,b);
}else{
return 1;
}
}
$A(self.tbl.rows).sort(sortBy).each(function(x){
var checkStatus=self.getChkBox(x).checked;
self.tbl.firstChild.appendChild(x);
if (checkStatus) self.getChkBox(x).checked=checkStatus;
});
},
rnd:function(){ //随即选择几行tr
var self=this,selmax=0,tbl=self.tbl;
if (tbl.rows.length){
selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //选择的行数不超过tr数的1/4
$A(tbl.rows).each(function(x){
self.getChkBox(x).checked=false;
self.restoreBgColor(x)
})
}else{
return alert("无数据可以选")
}
new Array(selmax).each(function(){
var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]
self.getChkBox(tr).checked=true;
self.highlight({target:self.getChkBox(tr)})
})
},
highlight:function(){ //设置tr的背景色
var self=this;
var evt=arguments[0] || window.event
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)
},
swapTr:function(tr1,tr2){ //交换tr1和tr2的位置
var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;
var tBody=tr1.parentNode
tBody.replaceChild(tr2,tr1);
tBody.insertBefore(tr1,target);
},
getChkBox:function(tr){ //从tr得到 checkbox对象
return tr.cells[0].firstChild
},
restoreBgColor:function(tr){
tr.style.backgroundColor="#ffffff"
},
setBgColor:function(tr){
tr.style.backgroundColor="#c0c0c0"
}
}

function f(a,b){
var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};
return sumRow(a)>sumRow(b)?1:-1;
}

</script>

</head>
<body>

<button onClick="javascript:mytable.rnd()">随机选择行</button>
<button onClick="javascript:mytable.add()">添加一行</button>
<button onClick="javascript:mytable.del()">删除选定行</button>
<button onClick="javascript:mytable.up()">上移选定行</button>
<button onClick="javascript:mytable.down()">下移选定行</button>
<button onClick="javascript:mytable.sort(1)">按第一列数字排序</button>
<button onClick="javascript:mytable.sort(f)">按每行数据的和排序</button>
<br/><br/>
<table width=100%>
<tr>
<td valign="top"><table border id="tbl" width="80%"></table></td>
<td valign="top"><table border id="tbl2" width="80%"></table></td>
</tr>
</table>
<br/><br/>
<button onClick="javascript:mytable2.rnd()">随机选择行</button>
<button onClick="javascript:mytable2.add()">添加一行</button>
<button onClick="javascript:mytable2.del()">删除选定行</button>
<button onClick="javascript:mytable2.up()">上移选定行</button>
<button onClick="javascript:mytable2.down()">下移选定行</button>
<button onClick="javascript:mytable2.sort(2)">按第二列数字排序</button>
<button onClick="javascript:mytable2.sort(f)">按每行数据的和排序</button>

</body>
</html>

js表格按id自动排序

"-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
function orderli(){
var d = document.getElementById("dli");
var lis = d.getElementsByTagName("li"); //获取div先所以li元素
var liids = []; //定义数组存储li的id用
for(var i=0,j=lis.length;i<j;i++){
liids.push(lis[i].id);
}
liids.sort(); //数组升序排序
for(var i=0,j=liids.length;i<j;i++){
d.getElementsByTagName("ul")[0].appendChild(document.getElementById(liids[i]));
}
}
</script>
</head>

<body>
<button type="button" value="order" onclick="javascript:orderli();">order</button>
<div id="dli">
<ul>
<li id="11">11html代码</li>
<li id="33">33html代码</li>
<li id="22">22html代码</li>
<li id="21">21html代码</li>
<li id="20">20html代码</li>
</ul>
</div>
</body>
</html>

js表格按id自动排序

"-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
function orderli(){
var d = document.getElementById("dli");
var lis = d.getElementsByTagName("li"); //获取div先所以li元素
var liids = []; //定义数组存储li的id用
for(var i=0,j=lis.length;i<j;i++){
liids.push(lis[i].id);
}
liids.sort(); //数组升序排序
for(var i=0,j=liids.length;i<j;i++){
d.getElementsByTagName("ul")[0].appendChild(document.getElementById(liids[i]));
}
}
</script>
</head>

<body>
<button type="button" value="order" onclick="javascript:orderli();">order</button>
<div id="dli">
<ul>
<li id="11">11html代码</li>
<li id="33">33html代码</li>
<li id="22">22html代码</li>
<li id="21">21html代码</li>
<li id="20">20html代码</li>
</ul>
</div>
</body>
</html>

sorttablejsoldindex错误

排序不对。sorttablejsoldindex错误是因为排序不对导致。需求是绑定按钮进行拖拽排序,但市面上有名气的插件都是整体div操作,后来看底层,都调用了sortable.js。自己跟自己排序的时候要返回false, 否则排序会不对 table.sort。

sorttablejsoldindex错误

排序不对。sorttablejsoldindex错误是因为排序不对导致。需求是绑定按钮进行拖拽排序,但市面上有名气的插件都是整体div操作,后来看底层,都调用了sortable.js。自己跟自己排序的时候要返回false, 否则排序会不对 table.sort。

利用JS应用的Javascript网格插件


表格一直是展示数据的最好方式。以微软的Excel为例,我们可以排序、整理、编辑,甚至几次点击轻松过滤数据。这次,我们看一看JavaScript网格插件,利用JS应用,它转换成普通表到“类Excel”布局,并有加载、操作、查看数据的一堆功能。
下面列出7个JavaScript网格插件,他们都有不错的功能和漂亮的UI,一定会非常有用。
FlexiGrid
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
EditableGrid
EditableGrid是一个JavaScript Library,利用它能够让标准的HTML表格变成可编辑和可排序。这个Library能够让用户自动使用适当的编辑器如textfields、checkbox等来编辑单元格,并内置多各个输入校验器(integer、double、URL、E-mail和Date)。此外EditableGrid还可选集成Open Flash Chart,能够自动将表格中的数据转成图表。
jQGrid
jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。它可以被整合用任何服务器端技术,包括PHP, ASP, Java Servlets, JSP, ColdFusion, 以及Perl。
TableSorter
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。
主要的特点包括:
多列排序 支持文本、URL地址、数值、IP地址、日期类型,以及自定义类型排序 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性 支持第二个隐藏域排序 可扩展外观 程序简小,打包后只有 7.4K
DataTables
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:
自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的
SlickGrid
SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列,调整列宽度,排序,自定义单元格展示格式和编辑器,支持编辑和创建新记录。
Grid from jQuery UI (coming soon)
jQuery UI Team 团队正在开发一个可创建富应用、快速的网格Widget,可加强HTML表格的数据链接、排序、排版、过滤、行选择、插入编辑等。
不过目前还没有发布,不需要等太久,oschina将跟踪该项目。

利用JS应用的Javascript网格插件


表格一直是展示数据的最好方式。以微软的Excel为例,我们可以排序、整理、编辑,甚至几次点击轻松过滤数据。这次,我们看一看JavaScript网格插件,利用JS应用,它转换成普通表到“类Excel”布局,并有加载、操作、查看数据的一堆功能。
下面列出7个JavaScript网格插件,他们都有不错的功能和漂亮的UI,一定会非常有用。
FlexiGrid
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
EditableGrid
EditableGrid是一个JavaScript Library,利用它能够让标准的HTML表格变成可编辑和可排序。这个Library能够让用户自动使用适当的编辑器如textfields、checkbox等来编辑单元格,并内置多各个输入校验器(integer、double、URL、E-mail和Date)。此外EditableGrid还可选集成Open Flash Chart,能够自动将表格中的数据转成图表。
jQGrid
jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。它可以被整合用任何服务器端技术,包括PHP, ASP, Java Servlets, JSP, ColdFusion, 以及Perl。
TableSorter
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。
主要的特点包括:
多列排序 支持文本、URL地址、数值、IP地址、日期类型,以及自定义类型排序 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性 支持第二个隐藏域排序 可扩展外观 程序简小,打包后只有 7.4K
DataTables
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:
自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的
SlickGrid
SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列,调整列宽度,排序,自定义单元格展示格式和编辑器,支持编辑和创建新记录。
Grid from jQuery UI (coming soon)
jQuery UI Team 团队正在开发一个可创建富应用、快速的网格Widget,可加强HTML表格的数据链接、排序、排版、过滤、行选择、插入编辑等。
不过目前还没有发布,不需要等太久,oschina将跟踪该项目。

javascript中数组的sort()方法不指定参数的排序规则是怎样的?

sort() 方法用于对数组的元素进行排序。

语法: arrayObject.sort(sortby)

参数:sortby 可选。规定排序顺序。必须是函数。

说明:如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

* 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

* 若 a 等于 b,则返回 0。

* 若 a 大于 b,则返回一个大于 0 的值。

参考资料:http://www.w3school.com.cn/js/jsref_sort.asp

html中的表格数据排序。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<title>main.html</title>

<style type="text/css">

table {

width: 300px; border : 1px solid black;

border-collapse: collapse;

border: 1px solid black;

}

td {

border: 1px solid black;

}

</style>

<script type="text/javascript">

function paiXu ()

{

var tabNode = document.getElementsByTagName ("table")[0];

var trs = tabNode.rows;

var arr = new Array;

for ( var x = 0; x < trs.length; x++)

{

arr.push (trs[x]);

}

sortt (arr);

for ( var x = 0; x < arr.length; x++)

{

tabNode.tBodies[0].appendChild (arr[x]);

}

}

function sortt (arr)

{

for ( var x = 0; x < arr.length; x++)

{

for ( var y = x + 1; y < arr.length; y++)

{

if (parseInt (arr[x].cells[1].childNodes[0].nodeValue) <= parseInt (arr[y].cells[1].childNodes[0].nodeValue))

{

var tmp = arr[x];

arr[x] = arr[y];

arr[y] = tmp;

}

}

}

}

</script>

</head>

<body>

<input type="button" value="排序" onclick="paiXu()">

<table>

<tr>

<td>小明</td>

<td>23</td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td>小花</td>

<td>21</td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td>小高</td>

<td>12</td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td>小林</td>

<td>25</td>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td>小王</td>

<td>35</td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

帮我找美食网还为您提供以下相关内容希望对您有帮助:

JS怎么实现表格排序功能实例

&lt;script type="text/javascript"&gt; function paiXu (){ var tabNode = document.getElementsByTagName ("table")[0];var trs = tabNode.rows;var arr = new Array;for ( var x = 0; x &lt; trs.length; x++){ ...

sorttable.js怎么用

首先在布局文件的开始导入该js 然后只需要在 table标签添加一个class="sortable"就一切OK了 这样就实现了表格的正反序的排列

sorttablejsoldindex错误

排序不对。sorttablejsoldindex错误是因为排序不对导致。需求是绑定按钮进行拖拽排序,但市面上有名气的插件都是整体div操作,后来看底层,都调用了sortable.js。自己跟自己排序的时候要返回false, 否则排序会不对 table.sort...

js表格按id自动排序

} liids.sort(); //数组升序排序 for(var i=0,j=liids.length;i&lt;j;i++){ d.getElementsByTagName("ul")[0].appendChild(document.getElementById(liids[i]));} } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;button typ...

Web前端工程师应该知道的提高JavaScript技能的技巧!

sortsort:根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或0,则顺序保持不变。如果返回正数,则交换元素顺序。letarr=[1,7,3,-1,5,7,2];constsorter=(firstEl,secondEl)=&gt;firstEl-secondEl;arr.sort(...

javascript对有空字符串的列表排序

var arr=["","","","hello","","ok",""];var arr1=arr.sort((a,b)=&gt;a==""?1:b==""?-1:a&gt;b?1:-1);console.log(arr1);

javascript中的冒泡排序法

冒泡排序的原理是这样的,比方说有五个数字54321,要按从小到大排列;首先比较前两个,就是5和4,如果第一个小于第二个,不做操作,如果第一个大于第二个,那么交换二者的位置,即变成45321,然后比较第二个和第三个,...

如何使用bootstrap-table进行后端排序

detailView: false, //是否显示父子表 responseHandler: handel,idField: "roleNo",columns: [{ checkbox: true }, { field: 'roleNo',title: '角色编号',sorttable: true }, { field: "roleNm",title: "角色...

html中的表格数据排序。

&lt;script type="text/javascript"&gt; function paiXu (){ var tabNode = document.getElementsByTagName ("table")[0];var trs = tabNode.rows;var arr = new Array;for ( var x = 0; x &lt; trs.length; x++){ ...

只用js如何实现表格内容的动态修改?

= tb.rows[0].cells[0];//获取0行0列的td单元格 td.innerHTML = '222';//动态修改表格的内容为222 &lt;/script&gt; &lt;/body&gt; 思路:1、获取表格的dom节点 2、通过rows和cells定位td单元格 3、通过修改innerHTML ...

Top