js實(shí)現(xiàn)表格單列按字母排序
本文實(shí)例為大家分享了js實(shí)現(xiàn)表格單列按字母排序的具體代碼,供大家參考,具體內(nèi)容如下
類似于列表按字母排序,直接上代碼啦~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格單列字母排序</title>
<link href="../css/表格數(shù)據(jù)搜索.css" rel="stylesheet">
</head>
<body>
<input type="button" id="myInput" onclick="myFunction()" value="點(diǎn)擊排序" 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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格數(shù)據(jù)搜索</title>
<link href="../css/表格數(shù)據(jù)搜索.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/表格數(shù)據(jù)搜索.js">
</script>
</body>
</html>
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;
}
}
}
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript的常規(guī)數(shù)組和關(guān)聯(lián)數(shù)組對(duì)比小結(jié)
關(guān)聯(lián)數(shù)組雖然可以用字符串作下標(biāo),但是這個(gè)下標(biāo)是不支持參數(shù)傳值的,換言之,你需要什么就取什么,聽起來很智能,實(shí)際上你取值仍然需要你手動(dòng)去寫下標(biāo)的2012-05-05
JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn)
本文主要介紹了JS模擬百度搜索框和選項(xiàng)卡的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
使用JavaScript和CSS實(shí)現(xiàn)簡單的字符計(jì)數(shù)器
在本文中,你將學(xué)習(xí)如何使用?JavaScript?創(chuàng)建字符計(jì)數(shù)器。計(jì)數(shù)的數(shù)字可以在小顯示屏中看到。文中示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-08-08
js實(shí)時(shí)監(jiān)聽文本框狀態(tài)的方法
js實(shí)時(shí)監(jiān)聽文本框狀態(tài)的方法,這里的方法兼容性不是很好,建議參考腳本之家以前的文章。2011-04-04
JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽使用方法以及實(shí)例效果演示
最近工作中遇到了鼠標(biāo)拖動(dòng)事件監(jiān)聽的相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)拖動(dòng)事件監(jiān)聽使用方法以及實(shí)例效果演示的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
bootstrap-closable-tab可實(shí)現(xiàn)關(guān)閉的tab標(biāo)簽頁插件
這篇文章主要為大家詳細(xì)介紹了bootstrap-closable-tab可實(shí)現(xiàn)關(guān)閉的tab標(biāo)簽頁插件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08
JS與Ajax Get和Post在使用上的區(qū)別實(shí)例詳解
這篇文章主要介紹了JS與Ajax Get和Post在使用上的區(qū)別實(shí)例詳解的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊(duì)列與循環(huán)隊(duì)列實(shí)例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊(duì)列與循環(huán)隊(duì)列,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascrip數(shù)據(jù)結(jié)構(gòu)中優(yōu)先隊(duì)列與循環(huán)隊(duì)列的原理、定義與使用方法,需要的朋友可以參考下2017-10-10

