- ベストアンサー
こんなJavaScriptありますか？
HTML文書にテキストで -------------------------------------- 3.文字C 4.文字D 2.文字B 6.文字F 1.文字A 5.文字E -------------------------------------- とあったとします。これを↓の状態にしたいです。 -------------------------------------- 文字A 文字B 文字C 文字D 文字E 文字F -------------------------------------- （1.～6.の順にソートし、1.～6.を消す） ソートするJavaScript、1.～6.を消すJavaScript、 どちらかでも構いません。 また、参考になりそうな情報だったら、 なんでも結構です。どなたかアドバイス頂けませんか？ ちなみに私自身のJavaScriptのレベルは、ほぼゼロです。 でも自分でいろいろ調べようと思っていますので そのヒントを頂ければ嬉しいです。 どうぞよろしくお願いします。
- non_milky
- お礼率91% (243/266)
- JavaScript
- 回答数7
- ありがとう数4
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (6)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
- steel_gray
- ベストアンサー率66% (1052/1578)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＞ペーストしてみたのですが、どうもうまくいかないみたい…。 ブラウザとかは何をお使いですか？ サンプルは、一応ＩＥ６とＦｉｒｅＦｏｘ１．０では動作確認しています。 サンプルが動かないという意味でしょうか？ ネスケでは、innerHTMLが働かないので、動作しないと思います。 自分のページに適用してみたがうまく行かないという場合は、補足でソースを挙げて下さい。 ＞かなり手抜きのサンプル １から始まり、数字の抜けがないとか 数字の後に必ず"."があるとか そういうことを前提としているので、そういうことをなるべく前提を少なくした汎用的なものを作るべきだけれども、そうしていないので「手抜き」をしていると言っております。 ------------------------------------------------------------------- ということで、innerHTMLに依存しないように、 ＤＯＭを使ってデータの部分にアクセスするように修正してみました。 今回は、Array.sort()を使っています。 ここでも、 テキスト<br>のような形になっていること。 初めの「.」の後ろが切り出すデータであることを前提としています。 行全体をソートの対象としているので、 数字で始まっているかどうかとか数字に抜けがあるかどうかは関係ありません。 ソート後のループは、１つにできますが、あえて処理を分けてあります。 ------------------------------------------------------------------- <script type="text/javascript"> <!-- window.onload=function (){ var old_el = document.getElementById("data"); var data = new Array(); for(var i=0;i< old_el.childNodes.length;i+=2){ data[i/2]=old_el.childNodes[i].nodeValue; } data.sort(); for(var i=0;i<data.length;i++){ data[i]=data[i].substr(data[i].indexOf(".")+1); } var new_el = document.createElement(old_el.nodeName); for(var i=0;i<data.length;i++){ new_el.appendChild(document.createTextNode(data[i])); br_el = document.createElement("BR"); new_el.appendChild(br_el); } old_el.parentNode.replaceChild(new_el, old_el); } //--> </script>
補足
取り急ぎ、ご質問へのお返事だけさせて頂きます。 申し訳ないです、ブラウザの問題のようだったようです。 こちらでは、頂いたソースをそのままペーストして、 opera7にて確認していました。 また新しいソースも試させて頂きます。 BLUEPIXY様、steel_gray様、 お二方にご回答を頂けて大変感謝しております。 ありがとうございます。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
かなり手抜きのサンプルです。 この例の場合、各行に順番となる数値がありますから、その数値を番号とする配列に切り出しで、数値の順番に取り出しています。 --------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>並び替え？</title> <script type="text/javascript"> <!-- window.onload=function (){ var data = (document.getElementById("data").innerHTML).split(/<br>/i); var lines = Array(); for(var i=0;i<data.length;i++){ lines[parseInt(data[i])]=data[i].substr(data[i].indexOf(".")+1); } var outStr=""; for(var i=1;i<lines.length;i++){ outStr+=lines[i]+"<br>"; } document.getElementById("data").innerHTML=outStr; } //--> </script> </head> <body> <div id="data"> 3.文字C<br> 4.文字D<br> 2.文字B<br> 6.文字F<br> 1.文字A<br> 5.文字E<br> </div> </body> </html>
お礼
ご回答、どうもありがとうございます。 ペーストしてみたのですが、どうもうまくいかないみたい…。 「かなり手抜きのサンプル」とのことなので これをヒントに作ってみなさい！と教えて下さったのですよね。 いま、試行錯誤しています＾＾； わざわざ、プログラムを書いて下さって、 どうもありがとうございました！
- steel_gray
- ベストアンサー率66% (1052/1578)
テーブルの内容をソートするサンプルならそこそこあると思うので「javascript テーブル ソート」で検索してみるとみつかります。 また、内容の書き換え（1.～6.を消す）については ・内容を取得する。 ・それを書き換える。 の二つの処理が必要になりますが、前者についてはソートする過程で内容を「見て」いるわけですから検索して探したソートのjavascriptを読み解いてみてください。 書き換えについてはいくつか方法はありますが文字列置換を使うといいかと思います。 「Javascript replace」で検索してみてください。 いろいろ調べたいとの事で直接的な回答は避けましたががんばってください。 時間があれば参考URLとそのリンク先も見てみて下さい。
- 参考URL：
- http://www.shoshinsha.com/pukiwiki/pukiwiki.php?JavaScript%A4%F2%CA%D9%B6%AF%A4%B7%A4%BF%A4%A4
お礼
ご回答ありがとうございます＾＾ 実は、検索やらしてみたのですが、 正直、ちんぷんかんぷんです…TT でも、参考URLなど頂いたので、いろいろ見てみたいと思います。 どうもありがとうございました！
お礼
詳しい解説をいただき、ありがとうございます。 これで、いろいろいじってみたいと思います。 BLUEPIXY様、steel_gray様、お二方にとても感謝しています。 どうもありがとうございました！