gpt4 book ai didi

js实现表格单列按字母排序

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现表格单列按字母排序由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

本文实例为大家分享了js实现表格单列按字母排序的具体代码,供大家参考,具体内容如下 。

类似于列表按字母排序,直接上代码啦~ 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
< html lang = "en" >
< head >
   < meta charset = "UTF-8" >
   < title >表格单列字母排序</ title >
   < link href = "../css/表格数据搜索.css" rel = "stylesheet" >
</ head >
< body >
< input type = "button" id = "myInput" onclick = "myFunction()" value = "点击排序" style = "background-image: none" >
< table id = "myTable" >
   < tr >
     < th >名称</ th >
     < th >城市</ th >
   </ tr >
   < tr >
     < td >Berglunds snabbkop</ td >
     < td >Sweden</ td >
   </ tr >
   < tr >
     < td >North/South</ td >
     < td >UK</ td >
   </ tr >
   < tr >
     < td >Alfreds Futterkiste</ td >
     < td >Germany</ td >
   </ tr >
   < tr >
     < td >Koniglich Essen </ td >
     < td >Germany</ td >
   </ tr >
   < tr >
     < td >Magazzini Alimentari Riuniti</ td >
     < td >Italy</ td >
   </ tr >
   < tr >
     < td >Paris specialites</ td >
     < td >France</ td >
   </ tr >
   < tr >
     < td >Island Trading</ td >
     < td >UK</ td >
   </ tr >
   < tr >
     < td >Laughing Bacchus Winecellars</ td >
     < td >Canada</ td >
   </ tr >
</ table >
< script src = "../js/表单单列字母排序.js" >
</ script >
</ body >
</ html >
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
< html lang = "en" >
< head >
   < meta charset = "UTF-8" >
   < title >表格数据搜索</ title >
   < link href = "../css/表格数据搜索.css" rel = "stylesheet" >
</ head >
< body >
< input type = "text" placeholder = "搜索..." id = "myInput" ο nkeyup = "myFunction()" >
< table id = "myTable" >
   < tr >
     < th >名称</ th >
     < th >城市</ th >
   </ tr >
   < tr >
     < td >Alfreds Futterkiste</ td >
     < td >Germany</ td >
   </ tr >
   < tr >
     < td >Berglunds snabbkop</ td >
     < td >Sweden</ td >
   </ tr >
   < tr >
     < td >Island Trading</ td >
     < td >UK</ td >
   </ tr >
   < tr >
     < td >Koniglich Essen</ td >
     < td >Germany</ td >
   </ tr >
</ table >
< script src = "../js/表格数据搜索.js" >
</ script >
</ body >
</ html >
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function myFunction() {
   var table=document.getElementById( "myTable" );
   var switching= true ;
   while (switching){
     switching= false ;
     var rows=table.getElementsByTagName( "tr" );
     for ( var i=1;i<(rows.length-1);i++){
       switching= false ;
       var x=rows[i].getElementsByTagName( "td" )[0];
       var y=rows[i+1].getElementsByTagName( "td" )[0];
       if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
         switching= true ;
         break ;
       }
     }
     if (switching){
       rows[i].parentNode.insertBefore(rows[i+1],rows[i]);
       switching= true ;
     }
   }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

原文链接:https://blog.csdn.net/weixin_45596380/article/details/105956426 。

最后此篇关于js实现表格单列按字母排序的文章就讲到这里了,如果你想了解更多关于js实现表格单列按字母排序的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com