HTML

HTMLを極めよう!

システム開発屋さんにもいろいろあって、汎用機系やらWeb系やら様々です。
Web系に特化すると(私自身は完全にWeb系)必須になるのがHTMLです。
ただ、なぜか開発者の中にはHTMLを舐めてる輩が多い。

なんでかな
HTMLをおろそかにするとJavaScriptが理解できないぞ。

そして忘れてほしくないのは、Web系プログラムの基本は
「ただただHTMLを出力すること」
だけだという事実。

なんだかんだ言っても最終的に表示はブラウザーに任せるわけだから…

それが体で理解できてないと痛い目を見るし、限界をわかってあげられないし、限界を超えてもあげられない。

HTMLのリスト<ol>タグの順番を降順にするっ

アイ・エス・シーブログより

サイト制作時にHTMLタグの番号付きリスト<ol>で一覧を作成していたときのこと

お客様からこんな要望が・・・

「降順じゃないと困りますよ・・・」


え。

あ、確かに頂いた原稿は降順だ・・・

しかし、この先まだ項目数は増えるわけで・・・

お客様に項番振りなおしてください・・・というわけにもいかず(第一自分たちが修正するのも面倒くさい)

必要に迫られインターネット検索しまくって実現させました。

こんな感じで降順にしちゃえます。



ソースは・・・こんな感じ


JavaScriptで&lt;ol&gt;の順番を降順にしちゃう方法

<div>
<form>
<script type="text/javascript">
function kojun(){
 var self = this;
 self.ul = document.getElementById("contentlist1");
 var lisTag = self.ul.getElementsByTagName("li");
 var lisNode = self.ul.childNodes;
 alert("getElementsByTagNameでの結果:" + lisTag.length);
 alert("childNodesでの結果:" + lisNode.length);

 // ブラウザ依存部分是正
 var max = lisTag.length;
 var interval = 1;
 if (lisTag.length < lisNode.length) {
  interval = 2;
  max = max * 2;
 }
 for(var i = 0;i < max ;i ++)
 {
  this.ul.childNodes[i].value = (max - i + (max - i) % interval) / interval;
 // alert(this.ul.childNodes[i].value);
 //子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
 }
 }
</script>
<ol id="contentlist1" onclick="alert(this.childNodes.length)">
 <li>これが1</li>
 <li>これは2</li>
 <li>これは3</li>
 <li>これは4・・・だよ</li>
 <li>これ5ね</li>
 <li>これ6です。</li>
 <li>これは7</li>
 <li>これは8</li>
 <li>でもこれは9</li>
 <li>しかしながら10</li>
 <li>かくかくしかじか11</li>
 <li>でも12</li>
 <li>恐れ入りますが13</li>
 <li>なぜか14</li>
 <li>おどろくべきことに15</li>
 <li>ここは16</li>
</ol>
<input type="button" value="降順にしちゃう!" onclick="javascript:kojun();">
</form>
</div>


参考まで~~


QRコード
QRコード
  • ライブドアブログ