ホームページ >ウェブフロントエンド >jsチュートリアル >javascript 2次元ソートテーブル code_javascriptスキル

javascript 2次元ソートテーブル code_javascriptスキル

WBOYオリジナル: 2016-05-16 18:14:351341ブラウズ

機能は次のとおりです。
1. 並べ替え機能: 行ヘッダーまたは列ヘッダーをクリックすると、逆順に並べ替えられます。
2. セルをダブルクリックして並べ替えます。入力操作を実行し、入力ボックスがフォーカスを失うと、新しいデータが保存されます。
3. ランダム関数: ページが更新されるたびに、テーブル内のデータが異なります。

javascript 2次元ソートテーブル code_javascriptスキル完全なソースコードは次のとおりです:

2次元ソートテーブル<title>
</title>
<style type="text/css"> 
* 
{ 
font-family: Tahoma, Arial, Serif; 
font-size: 14; 
} 
body 
{ 
text-align: center; 
min-width: 760px; 
} 
#main 
{ 
width: 720px; 
margin: 0 auto; 
text-align: left; 
} 
p 
{ 
border-bottom: dotted 1px #e63; 
font-size: 24px; 
font-family: Arial; 
font-weight: bold; 
} 
/* 设置表格样式 */table 
{ 
text-align: center; 
border: solid 1px #4682b4; 
width: 80%; 
background-color: #4682b4; 
} 
th 
{ 
background-color: #6495ed; 
cursor: pointer; 
color: White; 
height: 30px; 
} 
/* 配上单元格样式以后，表格呈现出细线的边框 */td 
{ 
background-color: #fff; 
padding: 4px; 
} 
/* 深蓝色（鼠标经过） */.activecol 
{ 
background-color: #005eae; 
} 
</style>

<div id="main">
<p>
2次元ソートテーブル</p>
<table id="tb" border="0" cellpadding="1" cellspacing="1"> 
<thead> 
<tr> 
<th> 
  
</th> 
<th onclick="sortColumn(1)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列1 
</th> 
<th onclick="sortColumn(2)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列2 
</th> 
<th onclick="sortColumn(3)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列3 
</th> 
<th onclick="sortColumn(4)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列4 
</th> 
<th onclick="sortColumn(5)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列5 
</th> 
<th onclick="sortColumn(6)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
列6 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行1 
</th> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行2 
</th> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行3 
</th> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行4 
</th> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
</tr> 
<tr> 
<th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 
行5 
</th> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
<td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)"> 
  
</td> 
</tr> 
</tbody> 
</table>
<div style="margin-top: 50px; background-color: #eeedf0; width: 80%; font-size: 12px;">
説明: <br>
1. ソート機能: 行ヘッダーまたは列ヘッダーをクリックして正の順序でソートし、もう一度クリックすると逆順にソートします。
2. 変更機能: セルをダブルクリックして入力操作を実行すると、入力ボックスがフォーカスを失うと、新しいデータが保存されます。
3. ランダム機能: ページを更新するたびに、テーブル内のデータが異なります <br>
<br>
<br>
</div>
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：IE6_jquery での jquery ベースの Colortip の情報プロンプトボックスプラグインの表示の問題を修正する方法次の記事：IE6_jquery での jquery ベースの Colortip の情報プロンプトボックスプラグインの表示の問題を修正する方法

続きを見る

javascript 2次元ソートテーブル code_javascriptスキル

関連記事