Major League Baseball 200x年 MLB.com jp
順位 チーム名 データ  項目1  項目2  項目3  項目4  項目5  項目6  項目7  項目8 
1 ピッツバーグ 1 5887 367.9 2774 173.4 3113 194.6 352 22.0
2 サンフランシスコ 2 5689 355.6 2244 140.2 3445 215.3 409 25.6
3 ダラス 3 4402 275.1 2184 136.5 2218 138.6 246 15.4
4 ニューヨーク メッツ 4 4795 299.7 2054 128.4 2741 171.3 308 19.2
5 セントルイス 5 6690 418.1 2027 126.7 4663 291.4 503 31.4
6 カンサスシティ 6 5673 354.6 2008 125.5 3665 229.1 320 20.0
7 インディアナポリス 6 5955 372.2 1966 122.9 3989 249.3 413 25.8
8 ワシントン 8 4435 277.2 1948 121.8 2487 155.4 256 16.0
9 シアトル 9 4772 298.2 1936 121.0 2836 177.2 301 18.8
10 デン バー 10 4817 301.1 1877 117.3 2940 183.8 340 21.2
11 テネシー 11 5354 334.6 1796 112.2 3558 222.4 336 21.0
12 ニューイングランド 12 4882 305.1 1793 112.1 3089 193.1 371 23.2
13 ニューヨークジャイアンツ 13 5335 333.4 1777 111.1 3558 222.4 294 18.4
14 フィラデルフィア 14 4923 307.7 1778 111.1 3145 196.6 343 21.4
15 アトランタ 15 5070 316.9 1773 110.8 3297 206.1 291 18.2
16 シカゴ 16 4694 293.4 1742 108.9 2952 184.5 338 21.1
17 シンシナティ 17 4800 300.0 1712 107.0 3088 193.0 226 14.1
18 ニューオリンズ 18 5226 326.6 1712 107.0 3514 219.6 333 20.8
19 ボルティモア 19 4773 318.2 1598 106.5 3175 211.7 284 18.9
20 サンディエゴ 20 5200 325.0 1695 105.9 3505 219.1 332 20.8
21 グリーンベイ 21 5463 341.4 1693 105.8 3770 235.6 390 24.4
22 バッファロー 22 5137 321.1 1686 105.4 3451 215.7 265 16.6
23 マイアミ 23 4821 301.3 1664 104.0 3157 197.3 344 21.5
24 オークランド 24 5361 335.1 1654 103.4 3707 231.7 399 24.9
25 ミネソタ 25 5006 333.7 1523 101.5 3483 232.2 287 19.1
26 ジャクソンヴィレ 26 4840 302.5 1600 100.0 3240 202.5 294 18.4
27 アリゾナ 27 4898 306.1 1449 90.6 3449 215.6 295 18.4
28 デトロイト 28 4994 312.1 1398 87.4 3596 224.8 270 16.9
29 カリフォルニア 29 4254 265.9 1372 85.8 2882 180.1 253 15.8
30 テンパベイ 30 4694 293.4 1371 85.7 3323 207.7 324 20.2
31 クリー ブ゙ランド 31 4152 259.5 1351 84.4 2801 175.1 285 17.8

 

 

ホーム へ       サンプルページ  ソート 2  sort2.htm

列タイトルのクリックで、表データーの文字列(昇/降順)ソート。   MLBスコアー。     リンク付きデータ可能。       DHTML。      配色、表、データなどのカスタマイズはテキストエディターなどで可。    all対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、”チーム名”や”項目1〜8”のクリック、(昇順/降順)ソ-トで。    ※:データは架空値。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、sort2.htm、0621001014.css、0621001014.js を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、sort2.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。    更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.css、*.jsなども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号5〃6スタイルシートリファレンスホームページ開設入門。   Web DevelopmentWeb開発IE10 互換性クックブック〃開発者向けガイド、IE API リファレンスIE 開発 > HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点XML〃リファレンスDHTML

 

(*1) sort2.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。

〔この列ペースト不要〕   

シフトJIS使用(削除不可)

互換表示

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  ソート2</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<link rel="stylesheet" type="text/css" href="0621001014.css" />
<script type="text/javascript" src="0621001014.js"></script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

(*2) sort2.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

 

 

タイトル

ハイパーリンク


 

項目 吹き出し

以下、同様。


<body>

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<table class="xxx" cellSpacing="0" cellPadding="0" border="0">
<thead>
<tr>
<th class="mainHeader" colSpan="11" style="text-align: center; background-color: #004309" height="28">
<font face="メイリオ,Arial"><b>Major League Baseball 200x年</b></font><font size="2"> 
</font><span style="font-weight: 400"><font face="Lucida Sans Unicode" size="2"><a href="http://mlb.mlb.com/home">MLB.com</a> 
<a href="http://gyao.yahoo.co.jp/mlb/">jp</a>
</font></span></th>
</tr>
<tr>
<table class="xxx" cellSpacing="0" cellPadding="0" border="0">
<thead>
<tr>
<th>順位</th>
<th><a title="Team Name、クリック → 文字列昇/降順ソート"
onclick="this.blur(); return sortTable('offTblBdy', 1, false);" href>チーム名</a></th>
<th class><span title="Games Played">データ </span></th>
<th class><a title="Total Yards、クリック → 文字列昇/降順ソート" onclick="this.blur(); return sortTable('offTblBdy', 3, true);"
href>項目1</a> </th>
<th class><a title="Yards Per Game、クリック → 文字列昇/降順ソート " onclick="this.blur(); return sortTable('offTblBdy', 4, true);"
href>項目2</a> </th>
<th class><a title="Total Rushing Yards、クリック → 文字列昇/降順ソート "
onclick="this.blur(); return sortTable('offTblBdy', 5, true);" href>項目3</a> </th>
<th class="sortedColumn"><a title="Rushing Yards Per Game、クリック → 文字列昇/降順ソート"
onclick="this.blur(); return sortTable('offTblBdy',
 6, true);" href>項目4</a> </th>
<th class><a title="Total Passing Yards、クリック → 文字列昇/降順ソート"
onclick="this.blur(); return sortTable('offTblBdy', 7, true);" href>項目5</a> </th>
<th class><a title="Passing Yards Per Game、クリック → 文字列昇/降順ソート"
onclick="this.blur(); return sortTable('offTblBdy', 8, true);" href>項目6</a> </th>
<th class><a title="Total Points Scored、クリック → 文字列昇/降順ソート"
onclick="this.blur(); return sortTable('offTblBdy', 9, true);" href>項目7</a> </th>
<th class><a title="Points Per Game、クリック → 文字列昇/降順ソート"
onclick="this.blur(); return sortTable('offTblBdy', 10, true);" href>項目8</a> </th>
</tr>
</thead>
<tbody id="offTblBdy" lastColumn="6">
<tr class rank="1">
<td class="numeric">1</td>
<td>
<a target="_blank" href="http://pittsburgh.pirates.mlb.com/NASApp/mlb/index.jsp?c_id=pit">ピッツバーグ</a></td>
<td class="numeric">1</td>
<td class="numeric">5887</td>
<td class="numeric">367.9</td>
<td class="numeric">2774</td>
<td class="numeric sortedColumn">173.4</td>
<td class="numeric">3113</td>
<td class="numeric">194.6</td>
<td class="numeric">352</td>
<td class="numeric">22.0</td>
</tr>
<tr class="alternateRow" rank="2">
<td class="numeric">2</td>
<td>
<a target="_blank" href="http://sanfrancisco.giants.mlb.com/NASApp/mlb/index.jsp?c_id=sf">サンフランシスコ</a></td>
<td class="numeric">2</td>
<td class="numeric">5689</td>
<td class="numeric">355.6</td>
<td class="numeric">2244</td>
<td class="numeric sortedColumn">140.2</td>
<td class="numeric">3445</td>
<td class="numeric">215.3</td>
<td class="numeric">409</td>
<td class="numeric">25.6</td>
</tr>

====  この間、説明を省略。  ====

 <tr class rank="31">
<td class="numeric">31</td>
<td>
<a target="_blank" href="http://cleveland.indians.mlb.com/NASApp/mlb/index.jsp?c_id=cle">クリー
ブ゙ランド</a></td>
<td class="numeric">31</td>
<td class="numeric">4152</td>
<td class="numeric">259.5</td>
<td class="numeric">1351</td>
<td class="numeric sortedColumn">84.4</td>
<td class="numeric">2801</td>
<td class="numeric">175.1</td>
<td class="numeric">285</td>
<td class="numeric">17.8</td>
</tr>
</table>

<p/>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。